CSS 卡片翻面 ( CSS Card Flip)

今天看到人家網站有做了一個利用CSS來完成卡片翻面的例子，我覺得有趣所以也寫了一個簡單的例子。


cardFlip.html

Card的架構就只要三個DIV包含了card , front跟back，至於front跟back是被card給包住的


<div id="card" class="card">
    <div class="front">
        <h3> Front </h3>
    </div>
    
    <div class="back">
          <h3> Back </h3>
    </div>
</div>​


Javascript

JS的部份就是對card的元件加入click event，然後在加入翻面的Class "flip"

document.getElementById("card").addEventListener("click",function(e){
    if(this.className.search("flip") === -1)
        this.className = this.className + " flip";
    else
        this.className = "card";    
});
​

CSS

.card {
    height: 280px;
    width: 225px;
    margin: 10px 10px 20px 10px;
    position: relative;
    cursor: pointer;
    -webkit-perspective: 600px;
    perspective: 600px;
}

.card .front {
    z-index: 900;
    background: #fff;
}

/* 一開始讓back轉成90度，你就看不到拉 (但是這邊不一定要這樣做) */

.card .back {
    z-index: 900;
    background: #fff;
    -webkit-transform: rotateY(90deg);
    -moz-transform: rotateY(90deg);
    -ms-transform: rotateY(90deg);
    -o-transform: rotateY(90deg);
    transform: rotateY(90deg);
}

.card .front, .card .back {
    float: none;
    position: absolute;
    top: 0;
    left: 0;
    width: inherit;
    height: inherit;
    border: 1px solid #dddddd;
    padding: 1px;
    -webkit-transform-style: preserve-3d;
    transform-style: preserve-3d;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    -webkit-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
    -moz-box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
    box-shadow: 0px 1px 4px rgba(0, 0, 0, 0.1);
    
    /* 卡片翻面的動畫時間 */

    -webkit-transition-duration: 3s, 1s;
    -moz-transition-duration: 3s, 1s;
    -ms-transition-duration: 3s, 1s;
    -o-transition-duration: 3s, 1s;
    transition-duration: 3s, 1s;
}

/* flip */

/* 讓front轉到看不見 */

.card.flip .front {
    z-index: 900;
    -webkit-transform: rotateY(180deg);
    -moz-transform: rotateY(180deg);
    -ms-transform: rotateY(180deg);
    -o-transform: rotateY(180deg);
    transform: rotateY(180deg); 
}

/* 將back轉出來 */

.card.flip .back {
    z-index: 1000;
    -webkit-transform: rotateY(360deg);
    -moz-transform: rotateY(360deg);
    -ms-transform: rotateY(360deg);
    -o-transform: rotateY(360deg);
    transform: rotateY(360deg);
}


Live Demo

http://jsfiddle.net/6vsAX/9/