在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。所以外部完成了它的高度過渡，內部沒有完成併發生在中間。