【发布时间】:2013-03-31 02:02:52
【问题描述】:
我有一个包含许多可以拖动的项目的 div。 我可以选择并分组多个项目,然后将它们作为一个组一起旋转。这一切都很好,但前提是单个项目之前应用了零旋转。
如果单个项目之前应用了局部旋转,则会出现问题。在这种情况下,分组轮换在项目的位置上有偏差,并且效果不佳。
我认为问题在于每个项目的局部单独旋转是在将变换原点设置为单个项目中心的 50% 50% 的情况下完成的。而围绕包含它们的组的中心旋转每个项目有一个新的变换原点,我们显然将其设置为组的中心。
假设,假设 item1 先进行了 45 度的局部旋转。然后将其与其他项目分组,并对该组应用 30 度的组旋转。那么 item1 必须相对于自身总共旋转 45 度,相对于组中心旋转 30 度。问题是我们如何实现它。
css3 中的旋转只允许一个变换原点。我已经尝试过矩阵和许多方法,但如果项目之前对其进行了轮换,结果仍然不会很好。如果项目之前有零旋转,一切都会很好。然后组围绕其中心旋转很大。但是,如果个别项目有局部旋转,那么当旋转整个组时,事情就会崩溃。
所以问题是,我们如何在使用不同变换原点的同一项目上组合两个旋转(或任何其他两个变换)(比如一个围绕其自身中心的局部,下一个围绕大组的中心,其中包括那个项目)。
【问题讨论】:
标签: css rotation css-transforms