JQuery实现图片3D旋转，轮播

客官°小女子只卖身不卖艺 2023-06-30 02:56 27阅读 0赞

JQuery实现图片3D旋转

X轴正方向向右、Y轴正方向向下、Z轴正方向从屏幕指向自己  
js代码：

```javascript
      <script>
      window.onload=function ( ) { 
              var element=document.getElementById('box');//获取box里面的元素
              var Img=element.children;//获取OWarp元素的孩子元素
              var deg=360/Img.length;//定义每一张图片的初始旋转角度
              var roX=0;//实际上要旋转的角度
              var roY=0;//实际上要旋转的角度
              var x,y,x_,y_,xN,yN;
              for(var i=0;i<Img.length;i++){  //遍历每一张图片
                Img[i].style.transform = 'rotateY('+ i*deg + 'deg) translateZ(220px)';
              //rotateY每一张图片围绕Y轴初始转动i*deg的角度
              //translateZ根据Z轴的参数进行3D转换，参数越大，图片越小，变化越不明显
                Img[i].style.transition =' all 1s '+ (Img.length-i-1)*0.1 +'s'; 
              //transition设置过度时间，设置图片初始展示的动画效果
                Img[i].ondragstart=function ( ) { 
                return false;
           		//控制鼠标点击图片不能实施拖出蓝图链接效果
                }
              }
    
              document.onmousedown=function ( e ) { //鼠标点击时触发的功能
                x_=e.clientX;//获取当前光标的X轴上的值
                y_=e.clientY;//获取当前光标的Y轴上的值
                document.onmousemove=function ( e ) { //鼠标移动时触发的功能
                 x=e.clientX;//获取当前光标的X轴上的值
                 y=e.clientY;//获取当前光标的Y轴上的值
                 
                 xN=x-x_;//获取光标的X轴上的差值，代表光标移动了多少的距离
                 yN=y-y_;//获取光标的Y轴上的差值，代表光标移动了多少的距离
                 roY+=xN*0.2;//按照一定比例进行转换，并且将X轴上移动的距离，施加到Y轴的旋转
                 roX-=yN*0.2;//按照一定比例进行转换，并且将Y轴上移动的距离，施加到X轴的旋转
                 element.style.transform='perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)';
                 //进行3D旋转
                 x_=e.clientX;
                 y_=e.clientY;
                }
                document.onmouseup=function ( ) { //鼠标抬起时的动作。、
                	document.onmousemove= null;
                }
              }
      }
      </script>

完整的HTML代码：
    
    <!DOCTYPE html >
    <html>
    <head>
      <meta charset="UTF-8">
      <title>3D动画</title>
      <style>
        *{
          margin: 0;
          padding: 0;
        }
        }
        body {
          background-color: #7FFFD4;
        }
        #box{
          top:100px;
          width:320px;
          height: 280px;
          margin: 100px auto;
          position:relative;
          transform-style: preserve-3d;
          transform:perspective(800px);                                                   
          }
        #box img{
          position: absolute;
          top:0;
          left: 0;
          width: 80%;
          height: 80%;
          border-radius: 3px;
          }
      </style>
    </head>
    <body>
    <div id="box">
      <img src="./img/dog.jpg" >
      <img src="./img/bg1.png" >
      <img src="./img/bg3.jpg" >
      <img src="./img/img1.png" >
      <img src="./img/bg5.jpg" >
      <img src="./img/bg2.png" >
    </div>
      <script>
      window.onload=function ( ) {
              var element=document.getElementById('box');//获取box里面的元素
              var Img=element.children;//获取OWarp元素的孩子元素
              var deg=360/Img.length;//定义每一张图片的初始旋转角度
              var roX=0;//实际上要旋转的角度
              var roY=0;//实际上要旋转的角度
              var x,y,x_,y_,xN,yN;
              for(var i=0;i<Img.length;i++){ //遍历每一张图片
                Img[i].style.transform = 'rotateY('+ i*deg + 'deg) translateZ(220px)';
              //rotateY每一张图片围绕Y轴初始转动i*deg的角度
              //translateZ根据Z轴的参数进行3D转换，参数越大，图片越小，变化越不明显
                Img[i].style.transition =' all 1s '+ (Img.length-i-1)*0.1 +'s'; 
              //transition设置过度时间，设置图片初始展示的动画效果
                Img[i].ondragstart=function ( ) {
                return false;
           		//控制鼠标点击图片不能实施拖出蓝图链接效果
                }
              }
    
              document.onmousedown=function ( e ) {//鼠标点击时触发的功能
                x_=e.clientX;//获取当前光标的X轴上的值
                y_=e.clientY;//获取当前光标的Y轴上的值
                document.onmousemove=function ( e ) {//鼠标移动时触发的功能
                 x=e.clientX;//获取当前光标的X轴上的值
                 y=e.clientY;//获取当前光标的Y轴上的值
                 
                 xN=x-x_;//获取光标的X轴上的差值，代表光标移动了多少的距离
                 yN=y-y_;//获取光标的Y轴上的差值，代表光标移动了多少的距离
                 roY+=xN*0.2;//按照一定比例进行转换，并且将X轴上移动的距离，施加到Y轴的旋转
                 roX-=yN*0.2;//按照一定比例进行转换，并且将Y轴上移动的距离，施加到X轴的旋转
                 element.style.transform='perspective(800px) rotateX('+roX+'deg) rotateY('+roY+'deg)';
                 //进行3D旋转
                 x_=e.clientX;
                 y_=e.clientY;
                }
                document.onmouseup=function ( ) {//鼠标抬起时的动作。、
                	document.onmousemove= null;
                }
              }
      }
      </script>
    </body>
    </html>
     
    演示效果：
    ![在这里插入图片描述](https://img-blog.csdnimg.cn/20200114212155408.png?x-oss-process=image/watermark,type_ZmFuZ3poZW5naGVpdGk,shadow_10,text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L3dlaXhpbl80MjMzNjAxMQ==,size_16,color_FFFFFF,t_70)
    
    本例源于（脚本之家https://www.jb51.net/article/156396.htm）