本文通过原生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;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>以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
