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