在 CSS 中翻转 3D 立方体，之后的过渡高度

Question

我正在尝试做一个简单的 2 面立方体旋转。旋转后，我想单击一侧并增加高度，但是过渡是从中间发生的，而不是自上而下（就像通常的高度过渡一样），所以我尝试更改变换原点。

另一个问题是，如果我将其更改为 90 度，在鼠标移动时，它会触发 mouseleave 并在两种状态之间波动，然后单击事件也无法正常工作。

.cube.active {
   -webkit-transform: rotateX(89deg);
   transform: rotateX(89deg); /* Text bleed at 90º */
}

http://jsfiddle.net/w7y4N/27/

Answer 1

或许最好去掉transition to transform的限制：

只是做：

-webkit-transition: .33s;
    transition: .33s;

http://jsfiddle.net/w7y4N/30/

您还有两个不同的过渡时间。一个用于 0.33s 的容器，一个用于内部高度为 1s。所以外部完成了它的高度转换，内部没有完成并发生在中间。