首页
所有分类
TAGS
文字工具 EMOJI BIBLE
编程 Javascript

原生JS实现逼真的图片3D旋转效果详解

Posted in Javascript onFebruary 16, 2019

本文实例讲述了原生JS实现逼真的图片3D旋转效果。分享给大家供大家参考，具体如下：

实现效果:

原生JS实现逼真的图片3D旋转效果详解

实现过程:

步骤一:先写一个简单的html结构,创建一个box盒子,里面放对应的图片(也可以用js创建图片,这里为了好理解,我们直接用html创建).

<body><div class="box">
  <img src="./img/1.jpg" alt="">
  <img src="./img/2.jpg" alt="">
  <img src="./img/3.jpg" alt="">
  <img src="./img/4.jpg" alt="">
  <img src="./img/5.jpg" alt="">
  <img src="./img/6.jpg" alt="">
  <img src="./img/7.jpg" alt="">
  <img src="./img/8.jpg" alt="">
  <img src="./img/9.jpg" alt="">
  <img src="./img/10.jpg" alt="">
  <img src="./img/11.jpg" alt="">
  <img src="./img/12.jpg" alt="">
</div>

步骤二:给盒子和图片,设置对应的样式

<style>
    *{
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #000;
      /*overflow: hidden;*/
    }
    #box{
      width:133px;
      height: 200px;
      margin: 200px auto;
      position:relative;
      border: 1px solid #fff;
      transform-style: preserve-3d;
      /*2.transform?style属性指定嵌套元素是在三维空间中呈现。(使用此属性必须先使用transform 属性)*/
      /*perspective:800px;*/
      /*3.设置透视距离*/
      transform:perspective(800px) rotateX(-15deg) rotateY(0deg) ;                                                                                                                                                                                                                  deg);
    }
    #box img{
      position: absolute;
      top:0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 3px;
      box-shadow: 0px 0px 5px #fff;
      /*4.设置图片阴影*/
      /*-webkit-box-reflect: below 15px -webkit-linear-gradient(top,rgba(0,0,0,0) 40%,rgba(0,0,0,.5) 100%);*/
      /*-webkit-box-reflect:below 8px -webkit-linear-gradient(top,rgba(0,0,0,0)40%,rgba(0,0,0,.5)100%);*/
      -webkit-box-reflect:below 10px -webkit-linear-gradient(transparent,transparent 50%,rgba(0,0,0,.6));
      /*5.设置图片倒影:直接记住吧(3个值。1. direction 定义方向，取值包括 above 、 below 、 left 、 right。);2. offset定义反射偏移的距离;3.mask-box-image定义遮罩图像，该图像将覆盖投影区域。如果省略该参数值，则默认为无遮罩图像。*/
    }
  </style>

第三步:js

<script>
  //   //js动态添加11个img标签
  //  //创建11个img标签的办法
  //   var box=document.getElementById('box');
  //   for(var i=1;i<=11;i++){//有多少张图就循环多少次
  //  var imgs= document.createElement('img');
  //  imgs.setAttribute("src", "img/"+i+".jpg");
  //  box.appendChild(imgs);}
        //当页面加载完毕后再执行代码
        window.onload=function ( ) {
          //1.获取元素
          var oWrap=document.getElementById('box');
          var oImg=oWrap.children;
          // var oImgLen=oImg.length;
          var deg=360/oImg.length;//3.每个需要旋转的度数
          // 定义一个开始的度数
          var roX=-10;
          var roY=0;
          var x,y,x_,y_,xN,yN,time=null;
         //2.遍历所有的img标签
          for(var i=0;i<oImg.length;i++){
          // oImg[i].style.cssText='transform:rotateY('+i*deg+'deg ) translateZ(350px);transition:1s'+ (oImgLen-i)*0.1 +'s;';
            oImg[i].style.transform = 'rotateY('+ i*deg + 'deg) translateZ(350px)';
            oImg[i].style.transition ='all 1s '+ (oImg.length-i-1)*0.1 +'s';
            //transition:设置过渡
            oImg[i].ondragstart=function ( ) {
            return false;
          }
          }
          //3.事件处理
          document.onmousedown=function ( e ) {
            clearInterval(time);
            e=e||window.event;
            x_=e.clientX;
            y_=e.clientY;
           // console.log ( "鼠标按下了" )
            this.onmousemove=function ( e ) {
            e=e||window.event;
            //获取滚动的X和Y轴
              //client:鼠标触发点相对于页面可视区域左上角距离
             x=e.clientX;
             y=e.clientY;
              //两点之间的差值:第一次走的时候两值相等,第二次走的时候x已经更新,但x_没更新,所以两个差值就是xN;
              xN=x-x_;
              yN=y-y_;
              //差值拼接到旋转的Y里面去
              roY+=xN*0.2;//水平拖影响Y轴;
              roX-=yN*0.2;
              oWrap.style.transform='perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)';
              // var oDiv =document.createElement('div');
              // this.body.appendChild(oDiv);
              // oDiv.style.cssText='width:5px;height:5px; background:red;position:absolute;left:'+x+"px;top:"+y+"px";
              x_=e.clientX;
              y_=e.clientY;
            }
            this.onmouseup=function ( ) {
             // console.log ( "鼠标抬起了" )
              this.onmousemove= null;
              //设置一个定时器,实现后面惯性效果8
             time=setInterval(function ( ) {
          //无限乘以零点95它会接近0的状态
            xN*=0.95;
            yN*=0.95;
            //当它小到0.1时停止计时器
            if(Math.abs(xN)<0.1 && Math.abs(yN)<0.1){//Math.abs()是返回绝对值
              clearInterval(time);
            }
          //差值拼接到旋转的Y里面去
          roY+=xN*0.2;//水平拖影响Y轴;
          roX-=yN*0.2;
          oWrap.style.transform='perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)';
        },30)
            }
          }
        }
  </script>

附件:完整版代码

<!DOCTYPE html >
<html lang="en" onselectstart="return false;">
<head>
  <meta charset="UTF-8">
  <title>Title</title>
  <style>
    *{
      margin: 0;
      padding: 0;
    }
    body {
      background-color: #000;
    }
    #box{
      width:133px;
      height: 200px;
      margin: 100px auto;
      position:relative;
      /* border: 1px solid #fff; 测试用到*/
      transform-style: preserve-3d;
      /*2.transform?style属性指定嵌套元素是在三维空间中呈现。(使用此属性必须先使用transform 属性)*/
      /*perspective:800px;*/
      /*3.设置透视距离*/
      transform:perspective(800px) rotateX(-15deg) rotateY(0deg) ;                                                   }
    #box img{
      position: absolute;
      top:0;
      left: 0;
      width: 100%;
      height: 100%;
      border-radius: 3px;
      box-shadow: 0px 0px 5px #fff;
      /*4.设置图片阴影*/
      -webkit-box-reflect:below 10px -webkit-linear-gradient(transparent,transparent 50%,rgba(0,0,0,.6));
      /*方法2-webkit-box-reflect:below 8px -webkit-linear-gradient(top,rgba(0,0,0,0)40%,rgba(0,0,0,.5)100%);*/
      /*5.设置图片倒影:直接记住吧(3个值。1. direction 定义方向，取值包括 above 、 below 、 left 、 right。);2. offset定义反射偏移的距离;3.mask-box-image定义遮罩图像，该图像将覆盖投影区域。如果省略该参数值，则默认为无遮罩图像。*/
    }
  </style>
</head>
<body>
<div id="box">
  <img src="./img/1.jpg" >
  <img src="./img/2.jpg" >
  <img src="./img/3.jpg" >
  <img src="./img/4.jpg" >
  <img src="./img/5.jpg" >
  <img src="./img/6.jpg" >
  <img src="./img/7.jpg" >
  <img src="./img/8.jpg" >
  <img src="./img/9.jpg" >
  <img src="./img/10.jpg" >
  <img src="./img/11.jpg" >
  <img src="./img/12.jpg" >
</div>
  <script>
  //   //js动态添加11个img标签
  //  //创建11个img标签的办法
  //   var box=document.getElementById('box');
  //   for(var i=1;i<=11;i++){//有多少张图就循环多少次
  //  var imgs= document.createElement('img');
  //  imgs.setAttribute("src", "img/"+i+".jpg");
  //  box.appendChild(imgs);}
        //当页面加载完毕后再执行代码
        window.onload=function ( ) {
          //1.获取元素
          var oWrap=document.getElementById('box');
          var oImg=oWrap.children;
          // var oImgLen=oImg.length;
          var deg=360/oImg.length;//3.每个需要旋转的度数
          // 定义一个开始的度数
          var roX=-10;
          var roY=0;
          var x,y,x_,y_,xN,yN,time=null;
         //2.遍历所有的img标签
          for(var i=0;i<oImg.length;i++){
          // oImg[i].style.cssText='transform:rotateY('+i*deg+'deg ) translateZ(350px);transition:1s'+ (oImgLen-i)*0.1 +'s;';
            oImg[i].style.transform = 'rotateY('+ i*deg + 'deg) translateZ(350px)';
            oImg[i].style.transition =' all 1s '+ (oImg.length-i-1)*0.1 +'s';
            //transition:设置过渡
            oImg[i].ondragstart=function ( ) {
            return false;
          }
          }
          //3.事件处理
          document.onmousedown=function ( e ) {
            clearInterval(time);
            e=e||window.event;
            x_=e.clientX;
            y_=e.clientY;
           // console.log ( "鼠标按下了" )
            this.onmousemove=function ( e ) {
            e=e||window.event;
            //获取滚动的X和Y轴
              //client:鼠标触发点相对于页面可视区域左上角距离
             x=e.clientX;
             y=e.clientY;
              //两点之间的差值:第一次走的时候两值相等,第二次走的时候x已经更新,但x_没更新,所以两个差值就是xN;
              xN=x-x_;
              yN=y-y_;
              //差值拼接到旋转的Y里面去
              roY+=xN*0.2;//水平拖影响Y轴;
              roX-=yN*0.2;
              oWrap.style.transform='perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)';
              // var oDiv =document.createElement('div');
              // this.body.appendChild(oDiv);
              // oDiv.style.cssText='width:5px;height:5px; background:red;position:absolute;left:'+x+"px;top:"+y+"px";这三行是测试用的
              x_=e.clientX;
              y_=e.clientY;
            }
            this.onmouseup=function ( ) {
             // console.log ( "鼠标抬起了" )
              this.onmousemove= null;
              //设置一个定时器,实现后面惯性效果8
             time=setInterval(function ( ) {
          //无限乘以零点95它会接近0的状态
            xN*=0.95;
            yN*=0.95;
            //当它小到0.1时停止计时器
            if(Math.abs(xN)<0.1 && Math.abs(yN)<0.1){//Math.abs()是返回绝对值
              clearInterval(time);
            }
          //差值拼接到旋转的Y里面去
          roY+=xN*0.2;//水平拖影响Y轴;
          roX-=yN*0.2;
          oWrap.style.transform='perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)';
        },30)
            }
          }
        }
  </script>
</body>
</html>

希望本文所述对大家JavaScript程序设计有所帮助。

原生JS实现逼真的图片3D旋转效果详解

- Author -

庚中

声明：登载此文出于传递更多信息之目的，并不意味着赞同其观点或证实其描述。

Javascript 相关文章推荐
JavaScript中Object和Function的关系小结
Sep 26 Javascript
javascript 多种搜索引擎集成的页面实现代码
Jan 02 Javascript
document.all的一个比较完整的总结及案例
Jan 31 Javascript
Javascript跨域请求的4种解决方式
Mar 17 Javascript
javascript使用onclick事件改变选中行的颜色
Dec 30 Javascript
javascript里绝对用的上的字符分割函数总结
Jul 31 Javascript
对比分析Django的Q查询及AngularJS的Datatables分页插件
Feb 07 Javascript
支付宝小程序自定义弹窗dialog插件的实现代码
Nov 30 Javascript
基于Three.js实现360度全景图片
Dec 30 Javascript
vue实现鼠标移入移出事件代码实例
Mar 27 Javascript
原生javascript制作贪吃蛇小游戏的方法分析
Feb 26 Javascript
基于Element封装一个表格组件tableList的使用方法
Jun 29 Javascript
JS实现简单的抽奖转盘效果示例
Feb 16 #Javascript
mocha的时序规则讲解
Feb 16 #Javascript
jQuery实现ajax的嵌套请求案例分析
Feb 16 #jQuery
解决微信小程序中转换时间格式IOS不兼容的问题
Feb 15 #Javascript
详解Element 指令clickoutside源码分析
Feb 15 #Javascript
Node.js原生api搭建web服务器的方法步骤
Feb 15 #Javascript
jQuery实现简单的Ajax调用功能示例
Feb 15 #jQuery
Windows Server(4) SandBox(1) webpack(1) cudn(1) Git(3) RTX 3050 ti(1) calc(1) swing(1) K8s(1) OpenFeign(1)
You might like
PHP伪静态写法附代码
2008/06/20 PHP
php几个预定义变量$_SERVER用法小结
2014/11/07 PHP
php实现微信原生支付（扫码支付）功能
2018/05/30 PHP
用javascript实现的仿Flash广告图片轮换效果
2007/04/24 Javascript
js中的string.format函数代码
2020/08/11 Javascript
extjs关于treePanel+chekBox全部选中以及清空选中问题探讨
2013/04/02 Javascript
JQuery分别取得每行最后一列和最后一行的示例代码
2013/08/18 Javascript
jquery 清空file域示例(兼容个浏览器)
2013/10/11 Javascript
JavaScript splice()方法详解
2020/09/22 Javascript
javascript返回顶部的按钮实现方法
2016/01/09 Javascript
实例讲解JavaScript的Backbone.js框架中的View视图
2016/05/05 Javascript
jquery实现简单Tab切换菜单效果
2020/07/17 Javascript
AngularJS基础 ng-cut 指令介绍及简单示例
2016/08/01 Javascript
深入理解JavaScript中Ajax
2016/08/02 Javascript
layui前段框架日期控件使用方法详解
2017/05/19 Javascript
IntersectionObserver实现图片懒加载的示例
2017/09/29 Javascript
element-ui 的el-button组件中添加自定义颜色和图标的实现方法
2018/10/26 Javascript
js实现计时器秒表功能
2019/12/16 Javascript
VUE 单页面使用 echart 窗口变化时的用法
2020/07/30 Javascript
解决vant框架做H5时踩过的坑(下拉刷新、上拉加载等)
2020/11/11 Javascript
[00:36]TI7不朽珍藏III——斯温不朽展示
2017/07/15 DOTA
Python 删除整个文本中的空格,并实现按行显示
2018/07/24 Python
python scipy求解非线性方程的方法(fsolve/root)
2018/11/12 Python
详解numpy.meshgrid()方法使用
2019/08/01 Python
Python序列化与反序列化pickle用法实例
2019/11/11 Python
python实现扫雷游戏
2020/03/03 Python
python实现最短路径的实例方法
2020/07/19 Python
外贸采购员求职的自我评价
2013/11/26 职场文书
打架检讨书100字
2014/01/19 职场文书
红旗方阵解说词
2014/02/12 职场文书
护士长2015年终工作总结
2015/04/24 职场文书
护士医德医风心得体会
2016/01/25 职场文书
tensorflow中的梯度求解及梯度裁剪操作
2021/05/26 Python
Java输出Hello World完美过程解析
2021/06/13 Java/Android
Python如何解决secure_filename对中文不支持问题
2021/07/16 Python
Axios代理配置及封装响应拦截处理方式
2022/04/07 Vue.js