使用CSS3轉換翻轉（旋轉和縮放）塊

Question

我要的div框：

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

然後我有CSS像這樣：

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

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

所以我需要轉換翻轉divs它自己做得很好。但是如何在翻轉後將其縮放到2x？

Answer 1

我認爲關鍵幀

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

或在方向ATLEAST東西