使用CSS3变换来翻转（旋转和缩放）一个块 [英] Using CSS3 transforms to flip (rotate and scale) a block

问题描述

我必须div框：

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

我现在有了这样的CSS：

I then have CSS like so:

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

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

所以我需要转换来翻转div 。但是如何在翻转后将其缩放到2x？

So I need the transform to flip the divs which it does fine on its own. But how do I scale it to 2x after the flip?

推荐答案

我建议关键帧

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

或在此方向至少做一些

这篇关于使用CSS3变换来翻转（旋转和缩放）一个块的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！