CSS3を使用すると、（回転とスケール）私は箱をDIVする必要がブロック

Question

反転する変換：私はそのようにようにCSSを持って

<div class="front"></div> 
<div class="back"></div> 

を：

.back:hover { 
    transform: scale(2) rotateX(0deg); 
} 

.front:hover { 
    transform: rotateX(180deg) scale(1); 
} 

だから私は反転する変換必要がありますそれはそれ自身でうまくいくdivs。しかし、フリップ後にどのように2倍にスケールするのですか？

Answer 1

は、私は、キーフレーム

@keyframes scaleUp { 
    50%{ 
     Transform: scale(2) rotate(0); 
    } 
    100%{ 
     Transform: scale(2) rotate(180deg); 
    } 
} 
.front { 
    animation: scaleUp 1s forwards; 
} 

それとも、 `animation` CSSプロパティを探しているよう