css - 在先前围绕单个元素中心的局部旋转之后，围绕组中心应用 css3 旋转

Question

我有一个包含许多可以拖动的元素的 div。 我可以选择多个元素并将其分组，然后将它们作为一个组一起旋转。这一切都很好，但前提是之前对各个元素应用了零旋转。

如果之前对单个元素应用了局部旋转，则会出现问题。在这种情况下，分组轮换在元素的位置上存在偏差并且效果不佳。

我认为问题在于每个元素的局部单独旋转是在将 transform-origin 设置为单个元素中心的 50% 50% 的情况下完成的。而围绕包含它们的组的中心旋转这些元素中的每一个都有一个新的变换原点，我们显然将其设置为组的中心。

假设，假设 item1 首先进行了 45 度的局部旋转。然后将其与其他元素分组，并对该组应用 30 度的分组旋转。那么 item1 总共必须相对于自身旋转 45 度，相对于组中心旋转 30 度。问题是我们如何实现这一点。

css3 中的旋转只允许一个变换原点。我已经尝试过矩阵和很多方法，但如果元素之前有旋转，结果仍然不会很好。如果元素之前的旋转为零，一切都会很好。然后小组围绕其中心旋转。但是，如果个别元素有局部轮换，那么在轮换整个组时事情就会崩溃。

所以问题是，我们如何将两个旋转(或任何其他两个变换)组合在使用不同变换源的同一元素上(比如一个局部围绕其自身中心，下一个围绕大组的中心，包括那个元素)。

Answer 1

您可以通过前后使用一个 translate() 来模拟多个变换源。这是一个例子:http://lea.verou.me/css-4d/#circle-demo-3 (可能需要一段时间才能加载)

请记住，每个变换函数都会改变整个坐标系，一切都会变得更容易理解。