0

我正在尝试在立方体的表面上构建一个四页的网站。我已经非常接近我在这里所追求的，但 3D 旋转有时并不像预期的那样。

单击导航元素时，将设置到正确面的 y 旋转以及围绕 x 和 z 轴的随机 +/-360，以获得酷炫的过渡效果。问题是当立方体旋转 90 或 270 度（通过点击想法或接触）时，进一步的 z 旋转不起作用。事实上，我很确定在这种状态下（旋转 90 或 270 度），rotateX 和 rotateZ 属性都围绕 x 轴应用，因为有时在思考时，再次单击思考会导致立方体围绕 x 旋转两次或一点也不，即使每次点击应该只增加/减少 x 或 z 角度 360 度。要观察这一点，请反复单击“想法”以查看#cube 元素的 rotateX 和 rotateY 样式在开发人员工具中正确更新，而立方体仅围绕 x 轴旋转。我'

这是我用来在导航点击时旋转立方体的代码：

    function performNavigation(pageName){
        //generate random spins for x and z
        if(Math.random() > .5){
            zAngle += 360;
        } else {
            zAngle += -360;
        }
        if(Math.random() > .5){
            xAngle += 360;
        } else {
            xAngle += -360;
        }
        //navToDegreesMap is an array that stores the correct rotation angle for each face of the cube
        yAngle = -navToDegreesMap[pageName];
        rotateCube(xAngle,yAngle,zAngle);
    }

    function rotateCube(xAngle, yAngle, zAngle){
        //prop is the transform property with appropriate vendor prefix
        document.getElementById('cube').style[prop] = "rotateX("+xAngle+"deg) rotateY("+yAngle+"deg) rotateZ("+zAngle+"deg)";
    }

来源在这里。

谢谢您的帮助！

4

0 回答 0