CSS动画按预期在Firefox中旋转不起作用

在Firefox上，此JSFiddle未按预期工作。CSS动画按预期在Firefox中旋转不起作用

在Chrome中，您可以看到齿轮围绕螺丝刀旋转，但在Firefox中，它围绕整个图像旋转。我曾尝试使用-moz-作为动画和关键帧，但没有运气。

我也试图实现transform-origin与center，center center，50% 50%等

许多值是否有一个解决方案？

2017-06-19 Clams Are Great

有一个看看这个，这可能是有帮助的https://stackoverflow.com/questions/15139090/setting-transform-origin-on-svg-group-not-working- in-firefox –

也许这可能会有所帮助。它适用于Firefox和Chrome。 http://jsfiddle.net/raving/e2tt2mao/。 – DanielaB67

如何用svg创建如此复杂的内容？ –

你是对的，它与变换来源有关，你所经历的是正确的行为。中心的起源是相对于父对象和上面的，因为我们正在处理SVG，所以在screwdriver-icon和screwdriver-gear的HTML部分中定义了定位。看看我们看到的大多数矢量都位于x：288 - 310和y：180 - 190.4之间。通过试验和错误，我计算出你的装备中心位于x：303和y：190.4。这适用于Chrome和Firefox。请参阅更新的小提琴：

https://jsfiddle.net/a8b4Lauk/23/

来源

2017-06-19 12:30:10

你是一个天才，非常感谢。 –

CSS动画按预期在Firefox中旋转不起作用

回答

相关问题