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: 1000;
    perspective: 1000;
    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度，这样元素就显示了。

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