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中旋轉不起作用

回答

相關問題