javascript - 为什么序列对于矩阵转换很重要，如同时旋转和平移变换

Question

我想同时为 matrix3d 设置旋转和平移的动画。奇怪的是我得到完全不同的结果，首先是旋转或平移。我有两个小提琴来显示差异。我不明白。

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;

Answer 1

这些操作是通过不可交换的矩阵乘法应用的。 http://en.wikipedia.org/wiki/Matrix_multiplication

Answer 2

围绕原点发生旋转。

如果要旋转不在原点的对象，则必须先将其平移到原点，旋转它，然后再将其平移回来。

如果您旋转不在原点的对象，您会以意想不到的方式有效地移动和旋转它。