Webkit CSS轉換旋轉不旋轉

我在使用CSS轉換在webkit中完整旋轉360度項目時遇到困難。Webkit CSS轉換旋轉不旋轉

我創建了一個JS提琴顯示我想要做的事：http://jsfiddle.net/russelluresti/PnTk8/2/

的過渡應在2個步驟發生。首先，該項目應該沿着Y軸旋轉1/2圈。然後，一旦轉換完成，它應該將相反的方向旋轉一整圈，然後縮小到原始尺寸的1/2。我遇到的問題是，即使旋轉值爲rotateY(-360deg)和rotateY(0deg)應導致完整旋轉，第二個轉換僅縮放而不旋轉。

這只是一個概念驗證，所以我現在只針對webkit。不過，我想堅持轉換，而不是關鍵幀動畫。有任何想法嗎？

來源

2012-04-27 RussellUresti

據我所知，從rotateY（-180deg）旋轉到rotateY（-360deg）將與rotateY（0）的狀態相同。讓我們這樣說吧：想象你在同一個方向上翻轉一張紙兩次，將完全與最初的狀態相同。結果，瀏覽器將其視爲'完全沒有改變'，因此在輪換時不會發生轉換。

另一個例子會使這個更清晰：

給定度數。設置爲你的情況，rotateY（-90deg）=> rotateY（-300deg）=> rotateY（60deg）將工作相同，第二次轉換不會啓動。 Becuz相對於原始狀態：rotateY（0），rotateY（-300deg）與rotateY（60deg）處於相同的狀態。

來源

2012-04-30 18:35:35 Linmic

儘管視圖可能相同，但0度旋轉和-360度旋轉之間存在差異。我把一個小提琴放在一起，以表明你可以在0到-360deg之間旋轉一個項目：http://jsfiddle.net/russelluresti/LXv5v/由於某些原因，它在我的例子中沒有按預期工作，這是正在制定的第二個過渡。 – RussellUresti 2012-05-01 14:29:10

@RussellUresti我只是重寫了一個演示來模仿你的情況：http://jsfiddle.net/linmic/CpdJG/，它可以完美地按照你的意願。至於你原來的情況，仍然遇到麻煩。 – Linmic 2012-05-01 18:38:36

這似乎工作。我無法弄清楚這和我的代碼有什麼不同（除了那些不應該改變的東西，比如定位圖片而不是容器），但它看起來像是一個很好的基線，重新應用我想要的定位和標記。謝謝。 – RussellUresti 2012-05-24 03:17:53

Webkit CSS轉換旋轉不旋轉

回答

相關問題