サブメニューに一種の「折りたたみ」効果を作成しようとしていますが、いくつか問題があります。
このcodepenを参照してください：http：//codepen.io/anon/pen/Lotav
ご覧のとおり、デフォルトではサブメニューの回転は90度です。メニュー項目にカーソルを合わせると、サブメニューが0度にアニメーション化され、一種の折りたたみ効果が得られます。問題は、サブメニューがアニメーションを開始すると（90度で）、その幅の中央に配置されることです。サブメニューの幅はXピクセルですが、回転すると幅が縮小し、実際の幅（X）の中央に配置されます。目的の効果を得るには、回転したときにサブメニューを左に配置する必要があります。
2番目の問題は、私が本当に奇妙だと思うのですが、サブメニューの回転を90度に設定しましたが、まったく表示されないということです。少し重なっています。90度で完全に垂直になる（したがって見えなくなる）必要がありますか、それとも何かが足りませんか？
私はChrome24とFirefox18でのみ効果をテストしました。Firefoxでは3D効果を機能させることができません。幅が狭くなるだけですが、Chromeでは実際に回転するのを見ることができます。Codepenで自動プレフィックスオプションをオンにしていますが、正しく機能するかどうかわかりません。
望まない効果のデモは次のとおりです： http：//davidwalsh.name/demo/folding-animation.php
唯一の違いは、上からではなく左から「折りたたむ」ことです。