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度，這樣元素就顯示了。

   以上是對大神的代碼的解讀，難免有不正確的，望諒解