本文通过原生JS，点击事件，鼠标按下、鼠标抬起和鼠标移动事件，实现3D立方体的拖动旋转，并将旋转角度实时的反应至界面上显示。
实现原理：通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标，来获得鼠标在X轴、Y轴移动的距离，将距离实时赋值给transform属性。
从而通过改变transform：rotate属性值来达到3D立方体旋转的效果：
HTML代码块：
XML/HTML Code复制内容到剪贴板 <body> <inputtype="button"class="open"value="点击散开"/> <inputtype="text"class="xNum"value="0"/>//X轴旋转角度 <inputtype="text"class="yNum"value="0"/>//Y轴旋转角度 <inputtype="text"class="zNum"/> <divclass="big_box"> <divclass="box"> <span>1</span> <span>2</span> <span>3</span> <span>4</span> <span>5</span> <span>6</span> </div> </div> </body>
CSS代码块：
CSS Code复制内容到剪贴板 <style> body{cursor:url("img/openhand1.png"),auto;} .big_box{ width:500px; height:500px; margin:200pxauto; } .box{ -webkit-transform-style:preserve-3d; -moz-transform-style:preserve-3d; -ms-transform-style:preserve-3d; transform-style:preserve-3d; transform-origin:100px100px00px; position:relative; transform:rotatex(0deg)rotatey(0deg)rotatez(0deg)scale3d(0.7,0.7,0.7); } .boxspan{ transition:all1slinear; } span{ display:block; position:absolute; width:200px; height:200px; box-sizing:border-box; border:1pxsolid#999; /*opacity:0.7;*/ text-align:center; line-height:200px; font-size:60px; font-weight:700; border-radius:12%; } .boxspan:nth-child(1){ background-color:deepskyblue; transform-origin:left; transform:rotatey(-90deg)translatex(-100px);//左 } .boxspan:nth-child(2){ background-color:red; transform-origin:rightright; transform:rotatey(90deg)translatex(100px);//右 } .boxspan:nth-child(3){ background-color:green; transform-origin:top; transform:rotatex(90deg)translatey(-100px);//上 } .boxspan:nth-child(4){ background-color:#6633FF; transform-origin:bottombottom; transform:rotatex(-90deg)translatey(100px);//下 } .boxspan:nth-child(5){ background-color:gold; transform:translatez(-100px);//后 } .boxspan:nth-child(6){ background-color:#122b40; transform:translatez(100px);//前 } .box:hoverspan{ opacity:0.3; } .box:hover{ animation-play-state:paused;//设置动画暂停 } </style>
JS代码块：
JavaScript Code复制内容到剪贴板 <script> move(); clickBox(); //鼠标按下且移动时触发， functionmove(){ varbody=document.querySelector("body"); varbox=document.querySelector(".box"); varxNum=document.querySelector(".xNum"); varyNum=document.querySelector(".yNum"); varx=0,y=0,z=0; varxx=0,yy=0; varxArr=[],yArr=[]; window.onmousedown=function(e){//鼠标按下事件 body.style.cursor='url("img/closedhand1.png"),auto'; xArr[0]=e.clientX/2;//获取鼠标点击屏幕时的坐标 yArr[0]=e.clientY/2; window.onmousemove=function(e){//鼠标移动事件————当鼠标按下且移动时触发 xArr[1]=e.clientX/2;//获取鼠标移动时第一个点的坐标 yArr[1]=e.clientY/2; yy+=xArr[1]-xArr[0];//获得鼠标移动的距离 xx+=yArr[1]-yArr[0]; xNum.value=xx+"°";//将所获得距离数字赋值给input显示旋转角度 yNum.value=yy+"°"; //将旋转角度写入transform中 box.style.transform="rotatex("+xx+"deg)rotatey("+yy+"deg)rotatez(0deg)scale3d(0.7,0.7,0.7)"; xArr[0]=e.clientX/2; yArr[0]=e.clientY/2; } }; window.onmouseup=function(){//鼠标抬起事件————用于清除鼠标移动事件， body.style.cursor='url("img/openhand1.png"),auto'; window.onmousemove=null; } } //点击事件、负责立方体盒子的六面伸展 functionclickBox(){ varbtn=document.querySelector(".open"); varbox=document.querySelector(".box"); varson=box.children; varvalue=0; //存储立方体散开时的transform参数 vararr0=["rotatey(-90deg)translatex(-100px)","rotatey(90deg)translatex(100px)","rotatex(90deg)translatey(-100px)",<br>"rotatex(-90deg)translatey(100px)","translatez(-100px)","translatez(100px)"]; //存储立方体合并时的transform参数 vararr1=["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)"]; btn.onclick=function(){ if(value==0){ value=1; btn.value="点击合并"; for(vari=0;i<arr1.length;i++){ son[i].style.transform=arr1[i]; console.log(son[i]) } }elseif(value==1){ value=0; btn.value="点击散开"; for(varj=0;j<arr0.length;j++){ son[j].style.transform=arr0[j]; console.log(j); } } }; } </script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持查字典教程网。
【css3 transform及原生js实现鼠标拖动3D立方体旋转】相关文章：