围绕任意点旋转（SVG、CSS），无需使用 transform-origin

Question

我希望能够通过链式平移和旋转（不使用transform-origin）来围绕特定点旋转svg-rect等对象。

根据我的调研，我发现如下操作可以实现：

1. 将旋转点平移到原点位置
2. 进行旋转
3. 重复步骤1，将其平移回原来的位置

但是当我尝试这样做时，出现了问题。

transform="translate(-100, -50) rotate(30)  translate(100, 50)"

原来它的呈现位置与相关内容相比是错误的

transform="rotate(30, 100, 50)"

我已经为此制作了一个示例: http://jsfiddle.net/VYmrX/。蓝色矩形是原始矩形，绿色矩形是用于比较的矩形，而红色矩形则是使用上述方法变换的。我希望它围绕其中心点 (100, 50) 旋转。

如何在不使用 transform-origin 的情况下实现这一点?

- Julian Habekost

Answer 1

你已经接近了，但是方向错了。

transform="translate(100, 50) rotate(30) translate(-100, -50)"

等价于 transform="rotate(30, 100, 50)"

需要从右到左阅读多个转换，因为最右边的部分首先应用。

- Robert Longson