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

Question

我正在尝试进行简单的双面立方体旋转。旋转后，我想单击其中一个边并使高度增加，但转换是从中间进行，而不是自上而下（如高度转换正常），所以我尝试更改变换原点。

另一个问题是，如果我将此更改为90deg，则在鼠标移动时，它会触发mouseleave并在两种状态之间波动，click事件无法正常工作。

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

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

Answer 1

也许最好删除转换到转换的限制：

只是这样做：

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

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

你也有两个不同的过渡时间。一个用于.33s的容器，一个用于内部的高度为1s。所以外部已完成其高度过渡，内部未完成并发生在中间。