jquery - 使用 CSS3 转换来翻转(旋转和缩放) block

Question

我必须划分盒子:

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

然后我有这样的 CSS:

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

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

所以我需要转换来翻转 div，它自己就可以正常工作。但是如何在翻转后将其缩放到 2 倍？

Answer 1

我建议关键帧

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

或者至少是那个方向的东西