CSS动画更改元素位置

我在一个圆里有一个六边形

请参见初始场景：

现在我想添加一个动画，将六边形在圆内旋转360度

这是css动画（）的现有场景：

。旋转{
-webkit动画：旋转3立方贝塞尔（0，0，1，1）无限交替；
动画：旋转三次贝塞尔（0，0，1，1）无限交替；
-webkit转换来源：50%50%；
变换原点：50%50%；
}
@-webkit关键帧旋转{
100% {
-webkit变换：旋转（360度）；
变换：旋转（360度）；
}
}

---

您面临的问题是，您正在使用CSS应用转换（

rotate（360deg）

），而SVG中的同一元素上已经有了转换（

translate（239370）

）。您可以通过两种方法解决此问题：

使用CSS应用所有变换，以便可以使用CSS控制动画

在子元素（六边形）上应用CSS动画

以下是如何使用第二种方法解决此问题的示例：

。旋转{
-webkit动画：旋转3立方贝塞尔（0，0，1，1）无限交替；
动画：旋转三次贝塞尔（0，0，1，1）无限交替；
-webkit转换来源：50%50%；
变换原点：50%50%；
}
@-webkit关键帧旋转{
100% {
-webkit变换：旋转（360度）；
变换：旋转（360度）；
}
}

---

也许这个解决方案在过去可能有效，但当我在您的解决方案中点击此处的运行代码片段时，它遇到了相同的问题，即多边形在圆内不旋转。我的svg旋转动画也有同样的问题。在我的例子中，最初没有应用这样的转换，我只是直接在子元素上使用CSS应用，但输出与本例中的预期不同。在努力解决这个问题后，我甚至在设计中从旋转切换到缩放动画，但面临同样的问题。元素的中心位置随这些动画的变化而变化。那么，我们如何解决这个问题呢？