本文通过原生JS， 点击事件 ，鼠标按下、鼠标抬起和鼠标移动事件，实现3D立方体的拖动旋转，并将旋转角度实时的反应至界面上显示。
&nbs p;
实现原理 ： 通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标，来获得鼠标在X轴、Y轴移动的 距离 ，将距离实时赋值给transform属性。
从而通过 改变 transform：rotate属性值来达到3D立方体旋转的效果：
HT ML 代码块：
XM L/HTML Code 复制内容到剪贴板
< body > < input ty PE = "button" class = "open" value = "点击散开" /> < input type = "text" class = "xNum" value = "0" /> //X轴旋转角度 < input type = "text" class = "yNum" value = "0" /> //Y轴旋转角度 < input type = "text" class = "zNum" /> < div class = " Big _box" > < div class = "box" > < span > 1 </ span > < span > 2 </ span > < span > 3 </ span > < span > 4 </ span > < span > 5 </ span > < span > 6 </ span > </ div > </ div > </ body > @H_ 126 _363@
CSS代码块：
CSS Code 复制内容到剪贴板
<style> body{ cursor : url ( " img /openhand1.png" ), auto ;} .big_box{ width : 500px ; h ei ght : 500px ; m@R_ 512 _2604@in : 200px auto ; } .box{ - webkit -t ransform -s tyle: PR eserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; transform-ori gin : 100px 100px 00px ; pos IT ion : relative ; transform: rotatex(0 deg ) rotatey(0deg) rotatez(0deg)scale3d(0.7,0.7,0.7); } .box span{ transition: all 1s linear; } span{ dis play : block ; position : absolute ; width : 200px ; height : 200px ; box-sizing: border -box; border : 1px solid # 999 ; /*opacity: 0.7;*/ text-align : center ; line-height : 200px ; font-size : 60px ; font-weight : 700; border -radius: 12%; } .box span:nth-child(1){ background-color : deepskyblue; transform-origin: left ; transform: rotatey(-90deg) trans latex (- 100px );//左 } .box span:nth-child(2){ background-color : red ; transform-origin: right right ; transform: rotatey(90deg) translatex( 100px ) ;//右 } .box span:nth-child(3){ background-color : green ; transform-origin: top ; transform: rotatex(90deg) translatey(- 100px ) ;//上 } .box span:nth-child(4){ background-color : #6633FF ; transform-origin: bottom bottom ; transform: rotatex(-90deg) translatey( 100px );//下 } .box span:nth-child(5){ background-color : gold; transform: translatez(- 100px );//后 } .box span:nth-child(6){ background-color : #122b40 ; transform: translatez( 100px );//前 } .box:hover span{ opacity: 0.3; } .box:hover{ animation-play- stat e:paused;//设置动画 暂停 } </style>
JS代码块：
JavaScript Code 复制内容到剪贴板
<script> ;m ove(); clickBox(); //鼠标按下且移动时触发， function move(){ VAR body = document.querySelector( "body" ); var box = document.querySelector( ".box" ); var xNum =document.querySelector( ".xNum" ); var yNum =document.querySelector( ".yNum" ); var x = 0,y = 0,z = 0; var xx = 0, yy = 0; var xArr = [],yArr = []; window.onmousedown = function (e) { //鼠标按下事件 body.style.cursor = 'url("img/closedhand1.png"),auto' ; xArr[0] = e.clientX/2; //获取鼠标点击屏幕时的坐标 yArr[0] = e.clientY/2; window.onmou SEM ove = 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 ; } } //点击事件、负责立方体 盒子 的六面伸展 function clickBox(){ var BT n = document.querySelector( ".open" ); var box = document.querySelector( ".box" ); var son = box.children; var value = 0; //存储立方体散开时的transform参数 var arr0 = [ "rotatey(-90deg) translatex(-100px)" , "rotatey(90deg) translatex(100px)" , "rotatex(90deg) translatey(-100px)" ,< br > "rotatex(-90deg) translatey(100px)" , "translatez(-100px)" , "translatez(100px)" ]; //存储立方体合并时的transform参数 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)" ]; btn.onclick = function (){ if (value == 0){ value = 1; btn.value = "点击合并" ; for ( var i=0;i<arr1.length; i++ ){ son[i].style.transform = arr1[i]; console. LOG (son[i]) } } else if (value == 1){ value = 0; btn.value = "点击散开" ; for ( var j=0;j<arr0.length;j++){ son[j].style.transform = arr0[j]; console.log(j); } } }; } </script>
以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。
总结
以上是 为你收集整理的 css3 transform及原生js实现鼠标拖动3D立方体旋转 全部内容，希望文章能够帮你解决 css3 transform及原生js实现鼠标拖动3D立方体旋转 所遇到的问题。
如果觉得 网站内容还不错， 推荐好友。
查看更多关于css3 transform及原生js实现鼠标拖动3D立方体旋转的详细内容...