在 Firefox 上这个 JSFiddle不按预期工作。
在 Chrome 中，您可以看到齿轮围绕着 Screwdriver 旋转，但在 Firefox 中，它围绕着整个图像旋转。我曾尝试使用 -moz- 来制作动画和关键帧，但没有成功。
我还尝试实现一个 transform-origin，其中包含多个 center、center center、50% 50%等
有解决办法吗？
最佳答案
你是对的，它与 transform-origin 有关，你正在经历的是正确的行为。 center 的原点是相对于父对象及以上对象的，因为我们处理的是 SVG，定位是在 screwdriver-icon 和 screwdriver-gear 的 HTML 部分中定义的。查看向量，我们发现它们中的大部分位于 x: 288 - 310 和 y: 180 - 190.4 之间。通过反复试验，我计算出你的齿轮中心位于 x: 303 和 y: 190.4。这适用于 Chrome 和 Firefox。查看更新后的 fiddle :
关于html - CSS 动画旋转在 Firefox 中无法正常运行，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/44627895/