html - CSS 中的累积变换

Question

如果我旋转一个已设置原点的 div，然后将原点设置为其他内容并应用另一个旋转，则只会看到第二次旋转。我知道这是因为旋转始终是从元素的原始位置开始的，没有应用任何转换。

我将如何执行第二次旋转，以便它相对于第一次旋转应用但具有新的原点？

Answer 1

好吧，我终于找到了一种方法来实现我想要的。您必须手动更改原点，方法是平移并将所有变换合并到一次变换调用中，以便平移和旋转创建一个变换矩阵，因此是累积的。

因此，例如，如果您想在 12,32 周围旋转 30 度，然后在 100,78 周围旋转 20 度，您可以这样做:

#element{
    transform: translate(-12,-32) rotate(30deg) translate(12,32) translate(-100, -78) rotate(20deg) translate(100, 78);
}