0

回転と平行移動を同時に使用して、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;
4

2 に答える 2

1

これらの演算は、可換ではない行列の乗算を介して適用されます。 http://en.wikipedia.org/wiki/Matrix_multiplication

于 2013-04-11T21:16:21.630 に答える
0

原点を中心に回転します。

原点にないオブジェクトを回転させたい場合は、最初に原点に移動し、回転させてから元に戻す必要があります。

原点にないオブジェクトを回転すると、予期しない方法で効果的に移動および回転します。

于 2013-04-11T21:17:52.300 に答える