利用animation和transform实现翻页效果

      最近要展示菜谱的步骤，想到采用翻页的动画效果来在各个步骤之间切换，以下是我的实现过程：

由于涉及到动画效果，肯定得采用CSS3动画来实现，CSS3提供了2种方式来在元素上应用动画：
1. animation和@keyframes
2. transition
其中第1种是直接实现动画的，允许定义动画的每一帧；第2种是利用过渡效果来间接实现动画。
显然采用第1种方式会更简单。

如何使用animation来控制动画？

先在元素上删除animation样式，之后给元素添加animation样式。原因如下：
animation样式与其他的绝大多数静态css样式不一样，animation样式指定的动画效果是在animation样式被添加到元素上的时候产生的，直到动画效果结束，给一个元素添加动画效果的关键在于产生一次animation样式的改变，从而触发浏览器的重新渲染。

如何实现翻页效果？

使用CSS3的transform样式，以下是其中的一个关键帧：

transform-origin:0 0;
transform:rotateY(90deg) skew(0 ,20deg);

其中rotateY()函数的效果是以Y轴旋转，skew()函数的效果是将矩形元素倾斜成平行四边形、从而达到3维透视效果。