3D CSS transform not rotating about the correct axis

Question

I'm attempting to build a four page website on the faces of a cube. I've gotten pretty close to what I was after here, but the 3D rotations sometimes don't behave as expected.

When a nav element is clicked, the y rotation to the correct face is set along with a random +/-360 about the x and z axes for a cool transition effect. The problem is that when the cube is rotated 90 or 270 degrees (by clicking thoughts or contact), further z rotations aren't working. In fact, I'm pretty sure that in this state (rotated 90 or 270 deg) both rotateX and rotateZ properties are being applied about the x-axis because sometimes when on thoughts, clicking thoughts again causes the cube to rotate twice about x or not at all, even though each click should only increment/decrement the x or z angles by 360 degrees. To observe this, click "thoughts" repeatedly to see the #cube element's rotateX and rotateY styles correctly update in Developer Tools while the cube spins only about the x-axis. I've observed this in both Chrome and Firefox.

Here's the code I'm using to rotate the cube on nav clicks:

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

The source is here.

Thank you for your help!