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

Why is the sequence important for matrix transitions like rotate and translate transform at the same time

本文关键字：旋转 平移变换 转换 为什么      更新时间：2023-09-26

我想在旋转和平移的同时动画一个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;

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

围绕原点旋转。

如果你想旋转一个不在原点的对象，你必须首先将它平移到原点，旋转它，然后再将它平移回来。

如果你旋转一个不在原点的对象，你实际上是以一种意想不到的方式移动和旋转它。

相关文章：