关于任意点的旋转矩阵

Question

默认情况下，旋转矩阵使用原点作为旋转的中心。要围绕任意点旋转，您必须使用平移矩阵减去到原点的距离，进行旋转，然后平移。除了这对我来说似乎没有那么好用。我有以下代码（假设我的对象是100x100，中心为50,50）：

t = IDENTITY;
t = translate(t, -50, -50);
t = rotate(t, theta);
t = translate(t, 50, 50);

不幸的是，如果我将此变换矩阵t应用于我的对象，则该对象的位置不正确。

我已经实现了一个快速的jsfiddle来演示我的问题：http://jsfiddle.net/9M3uy/67/

在JSFiddle中，红色旋转的方块是旋转应该结束的地方（由CSS3内置的变换原点提供），蓝色旋转的方块是我的计算结束的地方（绿色将是原始非 - 旋转方形）。

有什么想法吗？我只是不明白翻译，轮换，翻译机制是如何工作的，还是我做了一些可怕的错误？

Answer 1

您的代码中存在两个问题：

1. 矩阵乘法的顺序与您想要的顺序相反。看起来您希望rotate(t, theta)返回一个应用t后跟旋转的矩阵，但实际上它是相反的 - 旋转将在t之前应用。您需要在matrixMultiply和rotate中对translate的调用中反转参数顺序。

2. CSS matrix函数的参数顺序错误。它应该是a11, a21, a12, a22, a13, a23。你传递的是a11, a12, a21, a22, a13, a23。

这是fixed version。

Answer 2

尝试首先实现2d-cases的“标准”3x3矩阵乘法，并且只有在尝试优化掉由零乘以得到的元素之后。当索引方案太不正统时，有点难以看出公式是否正确。

旋转矩阵= [c -s 0; s c 0; 0 0 1]; 平移矩阵= [1 0 x; 0 1 y; 0 0 1];

我必须假设css -translation函数也假设3x3结果。

乘法和旋转都是通过将矢量（x，y，1）乘以相应的矩阵来执行的。

编辑：稍微摆弄后，似乎应该翻译矩阵 m ，或者可以将运算符定义为    return MatMul([rot matrix],m) and return MatMul([trans matrix],m)

EDIT2：现在我可以看到一些奇怪的东西：仅翻译+ -50，+ -50并旋转~10度，角落不会停留在红色正方形的中间。但是无论如何都不了解css矩阵的格式。遗憾...