3D CSS变换不绕正确的轴旋转

Question

我正在尝试在多维数据集的面上构建一个四页的网站。我已经非常接近here之后的状态，但3D旋转有时并不像预期的那样。

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

以下是我用于在导航点击上旋转多维数据集的代码：

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

来源为here。

感谢您的帮助！