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

Question

我正在尝试做一个简单的双面立方体旋转。旋转后，我想单击其中一个边并使高度增加，但是过渡发生在中间，而不是从顶部向下（如高度过渡通常），所以我尝试更改变换原点。

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

.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/

也有两种不同的过渡倍。一个用于0.33s的容器，另一个用于内部的高度1s。所以外部完成了它的高度过渡，内部没有完成并发生在中间。