高级CSS动画

Question

我一直在寻找this example并希望把它提升一个档次，我正在尝试使用数字“1”卡开始这样 （-webkit-transform：rotateZ（160deg）;）并且旋转Z向0翻转，我一直在玩矩阵和倾斜，似乎无法达到这种效果。

Answer 1

您可以同时提供相同的transform属性多个（空格分隔）transform-functions，在您的情况下就像这样;

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

（同样适用于背面）

纯Chrome演示：http://jsfiddle.net/4Z4sF/