css - 3D CSS 変換が正しい軸を中心に回転しない

Question

立方体の面に 4 ページの Web サイトを構築しようとしています。ここでの結果にかなり近づきましたが、3D 回転が期待どおりに動作しないことがあります。

nav 要素をクリックすると、適切な面への y 回転が、x 軸と z 軸を中心としたランダムな +/-360 とともに設定され、クールな遷移効果が得られます。問題は、立方体を 90 度または 270 度 (思考または接触をクリックして) 回転させると、それ以上の z 回転が機能しないことです。実際、この状態 (90 度または 270 度回転) では、rotateX プロパティと rotateZ プロパティの両方が x 軸を中心に適用されていると確信しています。クリックごとに x または z 角度を 360 度だけ増減する必要がありますが、まったくありません。これを観察するには、「思考」を繰り返しクリックして、#cube 要素のrotateXおよびrotateYスタイルがDeveloper Toolsで正しく更新されることを確認しますが、キューブは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)";
    }

ソースはこちら。

ご協力ありがとうございました！