我正在尝试为子菜单制作一种“折叠”效果，但我遇到了一些问题。
请参阅此代码笔： http ://codepen.io/anon/pen/Lotav
如您所见，默认情况下，子菜单旋转 90 度。当一个菜单项悬停时，子菜单动画到 0 度，给它一种折叠的效果。问题是，当子菜单开始动画时（90 度），它在它的宽度内居中。尽管子菜单的宽度为 X 像素，但在旋转时，宽度会缩小，然后在实际宽度 (X) 内居中。为了达到想要的效果，子菜单在旋转时必须位于左侧。
我觉得很奇怪的第二个问题是，虽然我将子菜单的旋转设置为 90 度，但看起来并不完全如此。它有点重叠。90 度应该使它完全垂直（因此不可见），还是我错过了什么？
我只在 Chrome 24 和 Firefox 18 中测试过效果。我无法在 Firefox 中获得 3d 效果，它只是在宽度上缩小了，而在 chrome 中你实际上可以看到它旋转。我在 codepen 中打开了自动前缀选项，但我不知道它是否正常工作。
这是一个不理想效果的演示：http: //davidwalsh.name/demo/folding-animation.php
唯一的区别是我希望它从左侧而不是顶部“折叠”。