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

Question

我想同时旋转和平移动画矩阵3d。奇怪的是，我得到完全不同的结果把旋转首先或翻译第一。 我有两个小提琴来展示不同之处。我不明白这一点。

http://jsfiddle.net/wetlip/2nuQu/旋转前旋转

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://jsfiddle.net/wetlip/Z3MTX/翻译。 http://en.wikipedia.org/wiki/Matrix_multiplication

Answer 2

围绕原点发生旋转。

如果要旋转不在原点的对象，必须首先将其转换为原点，然后旋转它，然后将其转回。

如果旋转不在原点的对象，则可以以非预期的方式有效地移动和旋转它。