回転と平行移動を同時に使用して、matrix3d をアニメーション化したいと考えています。奇妙なことに、回転を最初に置くか、平行移動を最初に置くと、まったく異なる結果が得られます。違いを示すために2つのフィドルがあります。私はそれを理解していません。
http://jsfiddle.net/wetlip/2nuQu/ 翻訳前に回転
http://jsfiddle.net/wetlip/Z3MTX/ 回転前の翻訳
var el = document.getElementById("aa2");
var matrix = new MSCSSMatrix(el.style.transform);
matrix = matrix.rotateAxisAngle(0, 1, 0, 85);
matrix = matrix.translate(300, 0, 0);
el.style.transform = matrix;
次のようにまったく異なる結果が得られます
var el = document.getElementById("aa2");
var matrix = new MSCSSMatrix(el.style.transform);
matrix = matrix.translate(300, 0, 0);
matrix = matrix.rotateAxisAngle(0, 1, 0, 85);
el.style.transform = matrix;