【问题标题】:Applying css3 rotation around center of group after previous local rotations around center of individual item在先前围绕单个项目中心进行局部旋转之后,围绕组中心应用 css3 旋转
【发布时间】:2013-03-31 02:02:52
【问题描述】:

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

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

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

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

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

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

【问题讨论】:

    标签: css rotation css-transforms


    【解决方案1】:

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

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

    【讨论】:

    • 非常感谢,你的例子很棒,太棒了,你对如何找到要翻译的数量有什么建议吗?作为我的主要问题,我试图在进行 x 旋转时使用三角方程来找到一个点的平移,但到目前为止还没有运气:) 我一直在看 stackoverflow.com/questions/5180685/…stackoverflow.com/questions/9043391/…
    • 在这个特定的例子中,数量是笑脸移动的圆的半径。第一次旋转旋转笑脸的坐标系,平移将其沿新的后旋转x-axis 移动,第二次旋转旋转回旋转后移动的坐标系。
    猜你喜欢
    • 2014-05-19
    • 1970-01-01
    • 1970-01-01
    • 2013-09-22
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多