这篇文章将为大家详细讲解有关css3 transfORM及原生js实现鼠标拖动3D立方体旋转的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。js的作用是什么1、能够嵌入动态文本于html页面。2、
这篇文章将为大家详细讲解有关css3 transfORM及原生js实现鼠标拖动3D立方体旋转的示例分析，小编觉得挺实用的，因此分享给大家做个参考，希望大家阅读完这篇文章后可以有所收获。
1、能够嵌入动态文本于html页面。2、对浏览器事件做出响应。3、读写HTML元素。4、在数据被提交到服务器之前验证数据。5、检测访客的浏览器信息。6、控制cookies，包括创建和修改等。7、基于node.js技术进行服务器端编程。
本文通过原生JS，点击事件，鼠标按下、鼠标抬起和鼠标移动事件，实现3D立方体的拖动旋转，并将旋转角度实时的反应至界面上显示。
实现原理：通过获取鼠标点击屏幕时的坐标和鼠标移动时的坐标，来获得鼠标在X轴、Y轴移动的距离，将距离实时赋值给transform属性。
从而通过改变transform：rotate属性值来达到3D立方体旋转的效果：
HTML代码块：
XML/HTML Code复制内容到剪贴板
<body> <input type="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>CSS代码块：
CSS Code复制内容到剪贴板
<style> body{cursor: url("img/openhand1.png"),auto;} .big_box{ width: 500px; height: 500px; margin: 200px auto; } .box{ -WEBkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; -ms-transform-style: preserve-3d; transform-style: preserve-3d; transform-origin:100px 100px 00px; position: relative; transform: rotatex(0deg) rotatey(0deg) rotatez(0deg)scale3d(0.7,0.7,0.7); } .box span{ transition: all 1s linear; } span{ display: block; position: absolute; width: 200px; height: 200px; box-sizing: border-box; border:1px solid #999; 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) translatex(-100px);//左 } .box span:nth-child(2){ background-color: red; transform-origin: rightright; 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: bottombottom; 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-state:paused;//设置动画暂停 } </style>JS代码块：
javascript Code复制内容到剪贴板
<script> move(); 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.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; } } //点击事件、负责立方体盒子的六面伸展 function clickBox(){ var btn = 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立方体旋转的示例分析”这篇文章就分享到这里了，希望以上内容可以对大家有一定的帮助，使各位可以学到更多知识，如果觉得文章不错，请把它分享出去让更多的人看到。
--结束END--
本文标题: css3 transform及原生js实现鼠标拖动3D立方体旋转的示例分析
本文链接: https://www.lsjlt.com/news/255251.html(转载时请注明来源链接)
有问题或投稿请发送至: 邮箱/279061341@qq.com QQ/279061341
下载Word文档到电脑，方便收藏和打印～
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
2024-05-14
回答
回答
回答
回答
回答
回答
回答
回答
回答
回答
官方手机版
微信公众号
商务合作
0