0

我有一个 div 有许多可以拖动的项目。我可以选择并分组多个项目,然后将它们作为一个组一起旋转。这一切都很好,但前提是单个项目之前对它们应用了零旋转。

如果单个项目之前应用了局部旋转,则会出现问题。在这种情况下,组轮换在项目的位置上有偏差并且不能很好地工作。

我认为问题在于每个项目的局部单独旋转是通过将变换原点设置为单个项目中心的 50% 50% 来完成的。而围绕包含它们的组的中心旋转每个项目具有一个新的变换原点,我们显然将其设置为组的中心。

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

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

所以问题是,我们如何在使用不同变换原点的同一个项目上组合两个旋转(或任何其他两个变换)(比如一个本地围绕它自己的中心,下一个围绕包含该项目的大组的中心) .

4

1 回答 1

2

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

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

于 2013-03-31T16:10:30.750 回答