html - 高级 CSS 动画

Question

我一直在查看这个示例并希望将其提升一个档次，我正在尝试让数字“1”卡像这样开始 （-webkit-transform：rotateZ（160deg）；）并在翻转时向 0 旋转，我一直在玩矩阵和倾斜，似乎无法获得这种效果。

Answer 1

您可以同时为同一transform属性提供多个（空格分隔）变换函数，在您的情况下是这样的；

#card .front {
    transition: all 1s;
    transform: rotateY(0deg) rotateZ(200deg);
}
#card.flipped .front {
    transform: rotateY(180deg) rotateZ(0deg);
}

（同样适用于背面）

仅限 Chrome 的演示：http: //jsfiddle.net/4Z4sF/