CSS3過渡旋轉Y沒有正確繞Y軸

Question

我有以下代碼： http://jsfiddle.net/RFMxG/1/

當過渡運行，你可以看到左側的約20-30像素的填充。儘管事實上我已經將transform-origin設置爲0,0,0，但它仍然沒有正確地繞y軸旋轉。在動畫期間，藍色盒子的左邊緣應始終與左手邊緣齊平。

誰能告訴我我做錯了什麼嗎？

Answer 1

對，所以解決方案實際上是由於轉換原點需要在動畫開始之前設置（不能在設置-webkit-transform屬性的同時設置）。

我已經更新了小提琴演示這現在可以正常工作。 http://jsfiddle.net/RFMxG/5/

Answer 2

好了，還有一大堆的問題在這裏：

1）CSS變換是不能設置動畫使用過渡。如果您查看可轉換屬性的W3C list，您會注意到轉換不存在。

2）-webkit-perspective隻影響它應用到的元素的子元素，而不影響元素本身。閱讀的Safari blog這個：

約-webkit-角度有趣的是，它不 直接影響的元素。相反，它會影響該元素轉換後代上3D變換的外觀;你可以把它看作是添加一個變換，它被乘以 後代變換。這允許這些後代在他們四處移動時共享相同的視角。

3）這真棒，你貼了小提琴，但由於這是一個CSS問題，以供將來參考它本來是一個容易得多，如果你清除了所有的JavaScript，並用一組瀏覽器只前綴。幫助我們幫助你！

4）你可能想要使用的是一個動畫。下面是懸停作品的小提琴高度改良的版本：

http://jsfiddle.net/RFMxG/4/

5）如果JavaScript是你的技能，以及你在所有關心瀏覽器的兼容性（當然你）我強烈建議用jstween來做這些動畫。