在先前围绕单个项目的中心进行局部旋转之后,围绕组的中心应用css3旋转

时间:2013-03-31 02:02:52

标签: css3 rotation css-transforms

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

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

我认为问题在于每个项目的本地个别轮换是通过将transform-origin设置为单个项目中心的50%50%来完成的。而围绕包含它们的组的中心旋转这些项目的每个项目都有一个新的变换原点,我们显然将它们设置为该组的中心。

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

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

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

1 个答案:

答案 0 :(得分:2)

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

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