Преобразование 3D CSS не вращается вокруг правильной оси

Я пытаюсь построить сайт с четырьмя страницами на лицах куба. Я довольно близок к тому, что было после здесь , но 3D-вращения иногда ведут себя не так, как ожидалось.

Когда щелкнут элемент nav, поворот y на правильную грань устанавливается вместе со случайным +/- 360 вокруг осей x и z для эффекта холодного перехода. Проблема в том, что, когда куб поворачивается на 90 или 270 градусов (щелкая мышью или контактом), дальнейшие повороты z не работают. На самом деле, я уверен, что в этом состоянии (повернутом на 90 или 270 град.) Вокруг оси x применяются свойства rotateX и rotateZ, потому что иногда, когда мысли, щелчки мыслей снова заставляют куб вращаться дважды вокруг x или совсем нет, хотя каждый клик должен только увеличивать/уменьшать углы x или z на 360 градусов. Чтобы это увидеть, нажмите «мысли» несколько раз, чтобы увидеть, что стили rotateX #cube и стили rotateY корректно обновляются в Инструментах разработчика, в то время как куб вращается только вокруг оси 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)";
    }

Источник здесь .

Спасибо за помощь!