CSS3 从左边旋转？答案

【问题标题】：CSS3 Rotate from the left?CSS3 从左边旋转？
【发布时间】：2013-01-13 01:09:46
【问题描述】：

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

如您所见，默认情况下，子菜单旋转 90 度。当一个菜单项悬停时，子菜单动画到 0 度，给它一种折叠的效果。问题是，当子菜单开始动画时（90 度），它在它的宽度内居中。尽管子菜单的宽度为 X 像素，但在旋转时，宽度会缩小，然后在实际宽度 (X) 内居中。为了达到想要的效果，子菜单在旋转时必须定位在左侧。

我觉得很奇怪的第二个问题是，虽然我将子菜单的旋转设置为 90 度，但看起来并不完全如此。它有点重叠。 90 度应该使它完全垂直（因此不可见），还是我错过了什么？

我只在 Chrome 24 和 Firefox 18 中测试过效果。我无法在 Firefox 中获得 3d 效果，它只是在宽度上缩小了，而在 chrome 中你实际上可以看到它旋转。我在 codepen 中打开了自动前缀选项，但我不知道它是否正常工作。

这是一个不理想效果的演示：http://davidwalsh.name/demo/folding-animation.php

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

【问题讨论】：

标签： css animation rotation position

【解决方案1】：

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

transform-origin: left;

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

demo.

【讨论】：

Transform-origin 正是我所需要的！但是，我确实需要那里的观点。将其置于悬停状态相当于将其完全移除，或者至少会产生相同的结果。在您的演示中，它看起来很平，好像宽度只是被推到一起。在我的演示中，使用li 中的透视图，您可以看到它有点“转动”（它赋予它 3d 效果）。我认为透视与旋转的重叠有关，但删除它只会让它更加混乱。你看出区别了吗？
我设法修复它，有点。使用backface-visability 我只是隐藏了重叠部分：codepen.io/anon/pen/zwcaI