当前位置：Gxlcms > css > css3transform及原生js实现鼠标拖动3D立方体旋转的示例介绍

css3transform及原生js实现鼠标拖动3D立方体旋转的示例介绍

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

本文通过原生JS，点击事件，鼠标按下、鼠标抬起和鼠标移动事件，实现3D立方体的拖动旋转，并将旋转角度实时的反应至界面上显示。


实现原理：通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标，来获得鼠标在X轴、Y轴移动的距离，将距离实时赋值给transform属性。

从而通过改变transform：rotate属性值来达到3D立方体旋转的效果：

HTML代码块：

  1. <body>
  2.     <input type="button" class="open" value="点击散开"/>
  3.     <input type="text" class="xNum" value="0"/>//X轴旋转角度   
  4.     <input type="text" class="yNum" value="0"/>//Y轴旋转角度   
  5.     <input type="text" class="zNum"/>
  6.     <p class="big_box">
  7.         <p class="box">
  8.             <span>1</span>
  9.             <span>2</span>
  10.             <span>3</span>
  11.             <span>4</span>
  12.             <span>5</span>
  13.             <span>6</span>
  14.         </p>
  15.     </p>
  16. </body>

CSS代码块：

  1. <style>   
  2.  body{cursor: url("img/openhand1.png"),auto;}   
  3.      .big_box{   
  4.             width: 500px;   
  5.             height: 500px;   
  6.             margin: 200px auto;   
  7.         }   
  8.         .box{   
  9.             -webkit-transform-style: preserve-3d;   
  10.             -moz-transform-style: preserve-3d;   
  11.             -ms-transform-style: preserve-3d;   
  12.             transform-style: preserve-3d;   
  13.             transform-origin:100px 100px 00px;   
  14.             position: relative;   
  15.             transform: rotatex(0deg) rotatey(0deg) rotatez(0deg)scale3d(0.7,0.7,0.7);   
  16.         }   
  17.         .box span{   
  18.             transition: all 1s linear;   
  19.         }   
  20.         span{   
  21.             display: block;   
  22.             position: absolute;   
  23.             width: 200px;   
  24.             height: 200px;   
  25.             box-sizing: border-box;   
  26.             border:1px solid #999;   
  27.             /*opacity: 0.7;*/
  28.             text-align: center;   
  29.             line-height: 200px;   
  30.             font-size: 60px;   
  31.             font-weight: 700;   
  32.             border-radius: 12%;   
  33.         }   
  34.         .box span:nth-child(1){   
  35.             background-color: deepskyblue;   
  36.             transform-origin: left;   
  37.             transform: rotatey(-90deg) translatex(-100px);//左   
  38.         }   
  39.         .box span:nth-child(2){   
  40.             background-color: red;   
  41.             transform-origin: rightright;   
  42.             transform: rotatey(90deg) translatex(100px) ;//右   
  43.         }   
  44.         .box span:nth-child(3){   
  45.             background-color: green;   
  46.             transform-origin: top;   
  47.             transform: rotatex(90deg) translatey(-100px) ;//上   
  48.         }   
  49.         .box span:nth-child(4){   
  50.             background-color: #6633FF;   
  51.             transform-origin: bottombottom;   
  52.             transform: rotatex(-90deg) translatey(100px);//下   
  53.         }   
  54.         .box span:nth-child(5){   
  55.             background-color: gold;   
  56.             transform: translatez(-100px);//后   
  57.         }   
  58.         .box span:nth-child(6){   
  59.             background-color: #122b40;   
  60.             transform: translatez(100px);//前   
  61.         }   
  62.         .box:hover span{   
  63.             opacity: 0.3;   
  64.         }   
  65.         .box:hover{   
  66.             animation-play-state:paused;//设置动画暂停   
  67.         }   
  68. </style>

JS代码块：

  1. <script>   
  2.     move();   
  3.     clickBox();   
  4.     //鼠标按下且移动时触发，
  5.     function move(){   
  6.         var body = document.querySelector("body");   
  7.         var box = document.querySelector(".box");   
  8.         var xNum =document.querySelector(".xNum");   
  9.         var yNum =document.querySelector(".yNum");   
  10.         var x = 0,y = 0,z = 0;   
  11.         var xx = 0,yy = 0;   
  12.         var xArr = [],yArr = [];   
  13.         window.onmousedown = function (e) {//鼠标按下事件
  14.             body.style.cursor = 'url("img/closedhand1.png"),auto';   
  15.             xArr[0] = e.clientX/2;//获取鼠标点击屏幕时的坐标
  16.             yArr[0] = e.clientY/2;   
  17.             window.onmousemove = function (e) {//鼠标移动事件————当鼠标按下且移动时触发
  18.                 xArr[1] = e.clientX/2;//获取鼠标移动时第一个点的坐标
  19.                 yArr[1] = e.clientY/2;   
  20.                 yy += xArr[1] - xArr[0];//获得鼠标移动的距离
  21.                 xx += yArr[1] - yArr[0];   
  22.                 xNum.value = xx+"°";//将所获得距离数字赋值给input显示旋转角度
  23.                 yNum.value = yy+"°";   
  24.                 //将旋转角度写入transform中
  25.                 box.style.transform = "rotatex("+xx+"deg) rotatey("+yy+"deg) rotatez(0deg)scale3d(0.7,0.7,0.7)";   
  26.                 xArr[0] = e.clientX/2;   
  27.                 yArr[0] = e.clientY/2;   
  28.             }   
  29.         };   
  30.         window.onmouseup = function () {//鼠标抬起事件————用于清除鼠标移动事件，
  31.             body.style.cursor = 'url("img/openhand1.png"),auto';   
  32.             window.onmousemove = null;   
  33.         }   
  34.     }   
  35.     //点击事件、负责立方体盒子的六面伸展
  36.     function clickBox(){   
  37.         var btn = document.querySelector(".open");   
  38.         var box = document.querySelector(".box");   
  39.         var son = box.children;   
  40.         var value = 0;   
  41.         //存储立方体散开时的transform参数
  42.         var arr0 = ["rotatey(-90deg) translatex(-100px)","rotatey(90deg) translatex(100px)","rotatex(90deg) translatey(-100px)",<br>"rotatex(-90deg) translatey(100px)","translatez(-100px)","translatez(100px)"];   
  43.         //存储立方体合并时的transform参数
  44.         var arr1 = ["rotatey(-90deg) translatex(-100px)translatez(100px)","rotatey(90deg) translatex(100px)translatez(100px)",<br>"rotatex(90deg) translatey(-100px)translatez(100px)","rotatex(-90deg) translatey(100px)translatez(100px)","translatez(-200px)","translatez(200px)"];   
  45.         btn.onclick = function(){   
  46.             if(value == 0){   
  47.                 value = 1;   
  48.                 btn.value = "点击合并";   
  49.                 for(var i=0;i<arr1.length;i++){   
  50.                     son[i].style.transform = arr1[i];   
  51.                     console.log(son[i])   
  52.                 }   
  53.             }else if(value == 1){   
  54.                 value = 0;   
  55.                 btn.value = "点击散开";   
  56.                 for(var j=0;j<arr0.length;j++){   
  57.                     son[j].style.transform = arr0[j];   
  58.                     console.log(j);   
  59.                 }   
  60.             }   
  61.         };   
  62.     }   
  63. </script>

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持PHP中文网。

以上就是css3 transform及原生js实现鼠标拖动3D立方体旋转的示例介绍的详细内容，更多请关注Gxl网其它相关文章！

人气教程排行

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