css3 transform及原生js实现鼠标拖动3D立方体旋转

2020-05-01 09:52:50易采站长站整理

                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)"];