CSS3從左側旋轉？

Question

我試圖爲子菜單提供一種「摺疊」效果，但我遇到了一些問題。

看到這個codepen：http://codepen.io/anon/pen/Lotav

正如你所看到的，默認情況下，子菜單中有90度的旋轉。當一個菜單項目被徘徊時，子菜單動畫到0度，給它帶來一種摺疊效果。問題是，當子菜單開始動畫（90度）時，它的寬度居中。即使子菜單的寬度爲X像素，旋轉時，寬度也會縮小，然後居中放置在實際寬度（X）內。爲了達到想要的效果，當旋轉時，子菜單必須是。

第二個問題，我覺得很奇怪，雖然我已將子菜單的旋轉角度設置爲90度，但並不完全如此。它有點重疊。 90度應使其完全垂直（因此不可見），或者我錯過了什麼？

我只測試了在Chrome 24和Firefox 18的效果，我不能獲得3D效果，在Firefox中工作，它那種只是縮小寬度，而在鍍鉻你可以看到它旋轉。我在codepen中打開了自動前綴選項，但我不知道它是否正常工作。

這裏的disired效果演示：http://davidwalsh.name/demo/folding-animation.php

唯一不同的是我希望它從左邊，而不是頂部的「摺疊」。

Answer 1

第一個問題：更改子菜單的默認transform-origin。用途：

transform-origin: left; 

第二個問題是由perspective: 1000;造成的 - 如果你刪除它，並添加它只是懸停時你不會有這個問題。

demo。