css3 transform及原生js实现鼠标拖动3D立方体旋转
更新时间:2023-04-06 23:02:44 阅读： 评论：0
本文通过原生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:ur不忘初心党员谈心谈话l(“img/openhand1.png”),auto;} .big_box{ width:500px; height:500px; margin:200pxauto; } .box{ -webkit-transform-style:prerve-3d; -moz-transform-style:prerve-3d; -ms-transform-style:prerve-3d; transform-style:prerve-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:paud;//设置动画暂停 } </style> js代码块：
javascript code
复制内容到剪贴板
<script> move(); clickbox(); //鼠标按下且移动时触发， functionmove(){ varbody=document.querylector(“body”); varbox=document.querylector(“.box”); varxnum=document.querylector(“.xnum”); varynum=document.querylector(“.ynum̶鲍鱼的简单做法1;); varx=0,y=0,z=0; varxx=0,yy=0; varxarr=[],yarr=[]; window.onmoudown=function(e){//鼠标按下事件 body.style.cursor=‘url(“img/clodhand1.png”),auto’; xarr[0]=e.clientx/2;//获取鼠标点击屏幕时的坐标 yarr[0]=e.client仙人球防辐射吗y/2; window.onmoumove=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.onmouup=function七年级地理上册课件(){//鼠标抬起事件————用于清除鼠标移动事件， body.style.cursor=‘url(“img/openhand1.png”),auto’; window.onmoumove=null; } } //点击事件、负责立方体盒子的六面伸展 functionclickbox(){ varbtn=document.querylector(“.open”); varbox=document.querylector(“.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]) } 中国新歌声第二季导师
}elif(value==1){ value=0; btn.value=“点击散开”; for(varj=0;j<arr0.length;j++){ son[j].style.transform=arr0[j]; console.log(j); } } }; } </script> 以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持www.887551.com。
本文word下载地址：css3 transform及原生js实现鼠标拖动3D立方体旋转.doc
本文 PDF 下载地址：css3 transform及原生js实现鼠标拖动3D立方体旋转.pdf
