Javascript 关于任意点的旋转矩阵

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

不幸的是，如果我将此变换矩阵

t

应用于对象，则对象的位置不正确

我已经实现了一个快速的JSFIDLE来演示我的问题：

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

---

有什么想法吗？我只是不明白平移、旋转、回平移机制是如何工作的，还是我做错了什么可怕的事情？

首先尝试实现2d情况下的“标准”3x3矩阵乘法，然后尝试优化掉因乘以零而产生的元素。当索引方案过于非正统时，很难看出公式是否正确

旋转矩阵=[c-S0；SC0；0101]； 平移矩阵=[1 x；0 1 y；0 0 1]

我必须假设css-翻译函数也假设3x3的结果

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

编辑：在修改一点之后，似乎矩阵m应该被转换，或者操作符可以定义为

返回MatMul（[rot矩阵]，m）和
返回MatMul（[转换矩阵]，m）

---

现在我可以看到一些奇怪的东西：只有+- 50，+- 50，旋转10度，角落不停留在红场的中间。但我还是不明白css矩阵的格式。抱歉…

您的代码中有两个问题：

矩阵乘法的顺序与您可能希望的相反。看起来您打算

rotate（t，θ）

返回一个矩阵，该矩阵应用

t

，然后再进行旋转，但事实上正好相反-旋转将在

t

之前应用。在

rotate

和

translate

中调用

matrixMultiply

时，需要颠倒参数顺序

CSS

矩阵

函数的参数顺序错误。它应该是

a11、a21、a12、a22、a13、a23

。您传入的是

a11、a12、a21、a22、a13、a23

---

以下是。

我将示例更新为完整的3x3乘法：。css转换（我想这就是你的意思）采用矩阵的形式：

矩阵（a、b、c、d、tx、ty）

（它会删除第三行）。你必须使用Chrome或Safari（或其他基于webkit的浏览器）。默认情况下，CSS中变换的原点位于中心，如果您没有更改CSS中的任何内容，那么由我的代码计算的矩阵似乎可以工作，但这只是因为浏览器正在为您将旋转居中。如果您查看更新的fiddle，其中我将所有浏览器的原点设置为0,0，您将看到您建议的更改无效。您必须使用Chrome或Safari。我更新了JSFIDLE，为所有浏览器添加了必要的CSS。是的！但你似乎找到了答案！我来的太晚了这是interjay固定版本的优化版本。

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