css3 翻牌动画

最近做了一个特效，css是从网上找的，地址是这个：

CSS3 animate flip下的纸牌翻转效果实例页面

把其中核心的css代码扒出来如下：

 /* The properties in this rule are only necessary for the 'flip' transition.
  * We need specify the perspective to create a projection matrix. This will add
  * some depth as the element flips. The depth number represents the distance of
  * the viewer from the z-plane. According to the CSS3 spec, 1000 is a moderate
  * value.
  */
 .viewport-flip {
     -webkit-perspective:;
     perspective:;
     position: absolute;
 }
 .flip {
     -webkit-backface-visibility: hidden;
     -webkit-transform: translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
     backface-visibility: hidden;/*backface-visibility 属性定义当元素不面向屏幕时是否可见*/
     transform: translateX(0);
 }
 .flip.out {
     -webkit-transform: rotateY(-90deg) scale(.9);
     -webkit-animation-name: flipouttoleft;
     -webkit-animation-duration: 175ms;
     transform: rotateY(-90deg) scale(.9);
     animation-name: flipouttoleft;
     animation-duration: 175ms;
 }
 .flip.in {
     -webkit-animation-name: flipintoright;
     -webkit-animation-duration: 225ms;
     animation-name: flipintoright;
     animation-duration: 225ms;
 }
 .flip.out.reverse {
     -webkit-transform: rotateY(90deg) scale(.9);
     -webkit-animation-name: flipouttoright;
     transform: rotateY(90deg) scale(.9);
     animation-name: flipouttoright;
 }
 .flip.in.reverse {
     -webkit-animation-name: flipintoleft;
     animation-name: flipintoleft;
 }
 @-webkit-keyframes flipouttoleft {
     from { -webkit-transform: rotateY(0); }
     to { -webkit-transform: rotateY(-90deg) scale(.9); }
 }
 @keyframes flipouttoleft {
     from { transform: rotateY(0); }
     to { transform: rotateY(-90deg) scale(.9); }
 }
 @-webkit-keyframes flipouttoright {
     from { -webkit-transform: rotateY(0) ; }
     to { -webkit-transform: rotateY(90deg) scale(.9); }
 }
 @keyframes flipouttoright {
     from { transform: rotateY(0); }
     to { transform: rotateY(90deg) scale(.9); }
 }
 @-webkit-keyframes flipintoleft {
     from { -webkit-transform: rotateY(-90deg) scale(.9); }
     to { -webkit-transform: rotateY(0); }
 }
 @keyframes flipintoleft {
     from { transform: rotateY(-90deg) scale(.9); }
     to { transform: rotateY(0); }
 }
 @-webkit-keyframes flipintoright {
     from { -webkit-transform: rotateY(90deg) scale(.9); }
     to { -webkit-transform: rotateY(0); }
 }
 @keyframes flipintoright {
     from { transform: rotateY(90deg) scale(.9); }
     to { transform: rotateY(0); }
 }

做一下简单的分析：

html结构应该如下：

 <div id="box" class="box viewport-flip" title="点击翻面">
                     <a href="/" class="list flip out"><img src="http://image.zhangxinxu.com/image/blog/201210/puke-k.png" alt="纸牌正面"></a>
                     <a href="/" class="list flip"><img src="http://image.zhangxinxu.com/image/blog/201210/puke-back.png" alt="纸牌背面"></a>
                 </div>

其中viewport-flip是父容器，这里的绝对定位我没有看明白为什么，尝试着去掉，依旧可以正常运行，其中最关键的就是这个.flip.out .flip.in，在这两个类上定义了动画事件，以out为例子如下：

 -webkit-transform: rotateY(-90deg) scale(.9);
    -webkit-animation-name: flipouttoleft;
    -webkit-animation-duration: 175ms;

　　其中规定动画为：

flipouttoleft

 @-webkit-keyframes flipouttoleft {
     from { -webkit-transform: rotateY(0); }
     to { -webkit-transform: rotateY(-90deg) scale(.9); }/*以Y轴旋转90度，这个时候就看不见了相当于隐藏了*/
 }

这样就会产生一个动画目前正在显示的元素以Y轴旋转逆时针（由rotateY(-90deg)的正负控制逆时针还是顺时针）90度，从开始from（旋转0度，即不旋转），到最终旋转到90，旋转过程中scale(.9)表示旋转过程中元素大小为正常大小的90%。

同理，in则是把一个已经旋转90度的元素相反的方向转回0度，这样元素就显示了。

以上是对大神的代码的解读，难免有不正确的，望谅解