CSS3 从左边旋转？

Question

我正在尝试为子菜单制作一种“折叠”效果，但我遇到了一些问题。

请参阅此代码笔: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

唯一的区别是我希望它从左侧而不是顶部“折叠”。

Answer 1

第一个问题:更改子菜单的默认transform-origin。使用:

transform-origin: left;

第二个问题是由 perspective: 1000; 引起的 - 如果您将其删除并仅在悬停时添加它，您将不会遇到此问题。

demo .