javascript - CSS の matrix3d の計算が正しくありませんが、なぜですか?

Question

私の問題を強調する次の JSFiddle http://jsfiddle.net/3vf9J/があります。

css変換をmatrix3dに結合する関数を作成する方法に関するガイドに従って、一度に複数をアップル化できるようにしました。

残念ながら、私はそれを適切に機能させることができませんでした。1 つの軸を中心に 180 度の単純な回転は、最終的に 135 度のように見えるので、どこかで数学が間違っていることは明らかです。

行列を理解している人は誰でも助けてくれますか?

私の関数は次のようになります。

var generateRotationMatrix = function(x, y, z, tx, ty, tz) {
    var a = x;
    var b = y;
    var c = z;

    var rotationXMatrix = $M([
      [1,0,0,0],
      [0,Math.cos(a), Math.sin(-a), 0],
      [0,Math.sin(a), Math.cos( a), 0],
      [0,0,0,1]
    ]);

    var rotationYMatrix = $M([
      [Math.cos( b), 0, Math.sin(b),0],
      [0,1,0,0],
      [Math.sin(-b), 0, Math.cos(b), 0],
      [0,0,0,1]
    ]);

    var rotationZMatrix = $M([
      [Math.cos(c), Math.sin(-c), 0, 0],
      [Math.sin(c), Math.cos( c), 0, 0],
      [0,0,1,0],
      [0,0,0,1]
    ]);

    var translationMatrix = $M([
                [1,0,0,0],
                [0,1,0,0],
                [0,0,1,0],
                [tx,ty,tz,1]
                   ]);
    var tM = rotationXMatrix
             .x(rotationYMatrix)
             .x(rotationZMatrix)
         .x(translationMatrix);

    var s  = "matrix3d("
    s += tM.e(1,1).toFixed(10) + "," + tM.e(1,2).toFixed(10) + "," + tM.e(1,3).toFixed(10) + "," + tM.e(1,4).toFixed(10) + ","
    s += tM.e(2,1).toFixed(10) + "," + tM.e(2,2).toFixed(10) + "," + tM.e(2,3).toFixed(10) + "," + tM.e(2,4).toFixed(10) + ","
    s += tM.e(3,1).toFixed(10) + "," + tM.e(3,2).toFixed(10) + "," + tM.e(3,3).toFixed(10) + "," + tM.e(3,4).toFixed(10) + ","
    s += tM.e(4,1).toFixed(10) + "," + tM.e(4,2).toFixed(10) + "," + tM.e(4,3).toFixed(10) + "," + tM.e(4,4).toFixed(10)
    s += ")";
    return s;
}

Sylvesterを使用して行列の計算 (乗算) を行っていることに注意してください。