使用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东西