使用 CSS3 转换来翻转（旋转和缩放）块

【问题标题】：Using CSS3 transforms to flip (rotate and scale) a block使用 CSS3 转换来翻转（旋转和缩放）块
【发布时间】：2016-08-30 18:08:28
【问题描述】：

我必须 div 框：

<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 倍？

【问题讨论】：

好像你正在寻找animation css 属性。

标签： jquery html css

【解决方案1】：

我建议关键帧

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

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

【讨论】：

jsfiddle.net/m2ukt404 这是一个关键帧的工作示例，虽然它的动画是在开始时运行的。