当前位置：Gxlcms > JavaScript > 原生JS实现逼真的图片3D旋转效果详解

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

时间：2021-07-01 10:21:17 帮助过：159人阅读

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

实现效果:

实现过程:

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

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

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

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

第三步:js

  1.   <script>
  2.   //   //js动态添加11个img标签
  3.   //  //创建11个img标签的办法
  4.   //   var box=document.getElementById('box');
  5.   //   for(var i=1;i<=11;i++){//有多少张图就循环多少次
  6.   //  var imgs= document.createElement('img');
  7.   //  imgs.setAttribute("src", "img/"+i+".jpg");
  8.   //  box.appendChild(imgs);}
  9.         //当页面加载完毕后再执行代码
  10.         window.onload=function ( ) {
  11.           //1.获取元素
  12.           var oWrap=document.getElementById('box');
  13.           var oImg=oWrap.children;
  14.           // var oImgLen=oImg.length;
  15.           var deg=360/oImg.length;//3.每个需要旋转的度数
  16.           // 定义一个开始的度数
  17.           var roX=-10;
  18.           var roY=0;
  19.           var x,y,x_,y_,xN,yN,time=null;
  20.          //2.遍历所有的img标签
  21.           for(var i=0;i<oImg.length;i++){
  22.           // oImg[i].style.cssText='transform:rotateY('+i*deg+'deg ) translateZ(350px);transition:1s'+ (oImgLen-i)*0.1 +'s;';
  23.             oImg[i].style.transform = 'rotateY('+ i*deg + 'deg) translateZ(350px)';
  24.             oImg[i].style.transition ='all 1s '+ (oImg.length-i-1)*0.1 +'s';
  25.             //transition:设置过渡
  26.             oImg[i].ondragstart=function ( ) {
  27.             return false;
  28.           }
  29.           }
  30.           //3.事件处理
  31.           document.onmousedown=function ( e ) {
  32.             clearInterval(time);
  33.             e=e||window.event;
  34.             x_=e.clientX;
  35.             y_=e.clientY;
  36.            // console.log ( "鼠标按下了" )
  37.             this.onmousemove=function ( e ) {
  38.             e=e||window.event;
  39.             //获取滚动的X和Y轴
  40.               //client:鼠标触发点相对于页面可视区域左上角距离
  41.              x=e.clientX;
  42.              y=e.clientY;
  43.               //两点之间的差值:第一次走的时候两值相等,第二次走的时候x已经更新,但x_没更新,所以两个差值就是xN;
  44.               xN=x-x_;
  45.               yN=y-y_;
  46.               //差值拼接到旋转的Y里面去
  47.               roY+=xN*0.2;//水平拖影响Y轴;
  48.               roX-=yN*0.2;
  49.               oWrap.style.transform='perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)';
  50.               // var oDiv =document.createElement('div');
  51.               // this.body.appendChild(oDiv);
  52.               // oDiv.style.cssText='width:5px;height:5px; background:red;position:absolute;left:'+x+"px;top:"+y+"px";
  53.               x_=e.clientX;
  54.               y_=e.clientY;
  55.             }
  56.             this.onmouseup=function ( ) {
  57.              // console.log ( "鼠标抬起了" )
  58.               this.onmousemove= null;
  59.               //设置一个定时器,实现后面惯性效果8
  60.              time=setInterval(function ( ) {
  61.           //无限乘以零点95它会接近0的状态
  62.             xN*=0.95;
  63.             yN*=0.95;
  64.             //当它小到0.1时停止计时器
  65.             if(Math.abs(xN)<0.1 && Math.abs(yN)<0.1){//Math.abs()是返回绝对值
  66.               clearInterval(time);
  67.             }
  68.           //差值拼接到旋转的Y里面去
  69.           roY+=xN*0.2;//水平拖影响Y轴;
  70.           roX-=yN*0.2;
  71.           oWrap.style.transform='perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)';
  72.         },30)
  73.             }
  74.           }
  75.         }
  76.   </script>

附件:完整版代码

  1. <!DOCTYPE html >
  2. <html lang="en" onselectstart="return false;">
  3. <head>
  4.   <meta charset="UTF-8">
  5.   <title>Title</title>
  6.   <style>
  7.     *{
  8.       margin: 0;
  9.       padding: 0;
  10.     }
  11.     body {
  12.       background-color: #000;
  13.     }
  14.     #box{
  15.       width:133px;
  16.       height: 200px;
  17.       margin: 100px auto;
  18.       position:relative;
  19.       /* border: 1px solid #fff; 测试用到*/
  20.       transform-style: preserve-3d;
  21.       /*2.transform–style属性指定嵌套元素是在三维空间中呈现。(使用此属性必须先使用transform 属性)*/
  22.       /*perspective:800px;*/
  23.       /*3.设置透视距离*/
  24.       transform:perspective(800px) rotateX(-15deg) rotateY(0deg) ;                                                   }
  25.     #box img{
  26.       position: absolute;
  27.       top:0;
  28.       left: 0;
  29.       width: 100%;
  30.       height: 100%;
  31.       border-radius: 3px;
  32.       box-shadow: 0px 0px 5px #fff;
  33.       /*4.设置图片阴影*/
  34.       -webkit-box-reflect:below 10px -webkit-linear-gradient(transparent,transparent 50%,rgba(0,0,0,.6));
  35.       /*方法2-webkit-box-reflect:below 8px -webkit-linear-gradient(top,rgba(0,0,0,0)40%,rgba(0,0,0,.5)100%);*/
  36.       /*5.设置图片倒影:直接记住吧(3个值。1. direction 定义方向，取值包括 above 、 below 、 left 、 right。);2. offset定义反射偏移的距离;3.mask-box-image定义遮罩图像，该图像将覆盖投影区域。如果省略该参数值，则默认为无遮罩图像。*/
  37.     }
  38.   </style>
  39. </head>
  40. <body>
  41. <div id="box">
  42.   <img src="./img/1.jpg" >
  43.   <img src="./img/2.jpg" >
  44.   <img src="./img/3.jpg" >
  45.   <img src="./img/4.jpg" >
  46.   <img src="./img/5.jpg" >
  47.   <img src="./img/6.jpg" >
  48.   <img src="./img/7.jpg" >
  49.   <img src="./img/8.jpg" >
  50.   <img src="./img/9.jpg" >
  51.   <img src="./img/10.jpg" >
  52.   <img src="./img/11.jpg" >
  53.   <img src="./img/12.jpg" >
  54. </div>
  55.   <script>
  56.   //   //js动态添加11个img标签
  57.   //  //创建11个img标签的办法
  58.   //   var box=document.getElementById('box');
  59.   //   for(var i=1;i<=11;i++){//有多少张图就循环多少次
  60.   //  var imgs= document.createElement('img');
  61.   //  imgs.setAttribute("src", "img/"+i+".jpg");
  62.   //  box.appendChild(imgs);}
  63.         //当页面加载完毕后再执行代码
  64.         window.onload=function ( ) {
  65.           //1.获取元素
  66.           var oWrap=document.getElementById('box');
  67.           var oImg=oWrap.children;
  68.           // var oImgLen=oImg.length;
  69.           var deg=360/oImg.length;//3.每个需要旋转的度数
  70.           // 定义一个开始的度数
  71.           var roX=-10;
  72.           var roY=0;
  73.           var x,y,x_,y_,xN,yN,time=null;
  74.          //2.遍历所有的img标签
  75.           for(var i=0;i<oImg.length;i++){
  76.           // oImg[i].style.cssText='transform:rotateY('+i*deg+'deg ) translateZ(350px);transition:1s'+ (oImgLen-i)*0.1 +'s;';
  77.             oImg[i].style.transform = 'rotateY('+ i*deg + 'deg) translateZ(350px)';
  78.             oImg[i].style.transition =' all 1s '+ (oImg.length-i-1)*0.1 +'s';
  79.             //transition:设置过渡
  80.             oImg[i].ondragstart=function ( ) {
  81.             return false;
  82.           }
  83.           }
  84.           //3.事件处理
  85.           document.onmousedown=function ( e ) {
  86.             clearInterval(time);
  87.             e=e||window.event;
  88.             x_=e.clientX;
  89.             y_=e.clientY;
  90.            // console.log ( "鼠标按下了" )
  91.             this.onmousemove=function ( e ) {
  92.             e=e||window.event;
  93.             //获取滚动的X和Y轴
  94.               //client:鼠标触发点相对于页面可视区域左上角距离
  95.              x=e.clientX;
  96.              y=e.clientY;
  97.               //两点之间的差值:第一次走的时候两值相等,第二次走的时候x已经更新,但x_没更新,所以两个差值就是xN;
  98.               xN=x-x_;
  99.               yN=y-y_;
  100.               //差值拼接到旋转的Y里面去
  101.               roY+=xN*0.2;//水平拖影响Y轴;
  102.               roX-=yN*0.2;
  103.               oWrap.style.transform='perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)';
  104.               // var oDiv =document.createElement('div');
  105.               // this.body.appendChild(oDiv);
  106.               // oDiv.style.cssText='width:5px;height:5px; background:red;position:absolute;left:'+x+"px;top:"+y+"px";这三行是测试用的
  107.               x_=e.clientX;
  108.               y_=e.clientY;
  109.             }
  110.             this.onmouseup=function ( ) {
  111.              // console.log ( "鼠标抬起了" )
  112.               this.onmousemove= null;
  113.               //设置一个定时器,实现后面惯性效果8
  114.              time=setInterval(function ( ) {
  115.           //无限乘以零点95它会接近0的状态
  116.             xN*=0.95;
  117.             yN*=0.95;
  118.             //当它小到0.1时停止计时器
  119.             if(Math.abs(xN)<0.1 && Math.abs(yN)<0.1){//Math.abs()是返回绝对值
  120.               clearInterval(time);
  121.             }
  122.           //差值拼接到旋转的Y里面去
  123.           roY+=xN*0.2;//水平拖影响Y轴;
  124.           roX-=yN*0.2;
  125.           oWrap.style.transform='perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)';
  126.         },30)
  127.             }
  128.           }
  129.         }
  130.   </script>
  131. </body>
  132. </html>

更多关于JavaScript相关内容感兴趣的读者可查看本站专题：《JavaScript动画特效与技巧汇总》、《JavaScript页面元素操作技巧总结》、《JavaScript运动效果与技巧汇总》、《JavaScript图形绘制技巧总结》、《JavaScript切换特效与技巧总结》、《JavaScript错误与调试技巧总结》、《JavaScript数据结构与算法技巧总结》及《JavaScript数学运算用法总结》

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

人气教程排行

本站所有资源全部来源于网络，若本站发布的内容侵害到您的隐私或者利益，请联系我们删除！