CSS 卡片翻面 ( CSS Card Flip)


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


cardFlip.html

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


<div id="card" class="card">
    <div class="front">
        <h3Front </h3>
    </div>
    
    <div class="back">
          <h3Back </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 {
    height280px;
    width225px;
    margin10px 10px 20px 10px;
    positionrelative;
    cursorpointer;
    -webkit-perspective: 600px;
    perspective: 600px;
}

.card .front {
    z-index900;
    background#fff;
}

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

.card .back {

    z-index900;
    background#fff;
    -webkit-transformrotateY(90deg);
    -moz-transformrotateY(90deg);
    -ms-transformrotateY(90deg);
    -o-transformrotateY(90deg);
    transformrotateY(90deg);
}

.card .front.card .back {
    floatnone;
    positionabsolute;
    top0;
    left0;
    widthinherit;
    heightinherit;
    border1px solid #dddddd;
    padding1px;
    -webkit-transform-stylepreserve-3d;
    transform-stylepreserve-3d;
    -webkit-backface-visibilityhidden;
    backface-visibilityhidden;
    -webkit-box-shadow0px 1px 4px rgba(0000.1);
    -moz-box-shadow0px 1px 4px rgba(0000.1);
    box-shadow0px 1px 4px rgba(0000.1);
    
    /* 卡片翻面的動畫時間 */

    -webkit-transition-duration3s1s;

    -moz-transition-duration3s1s;
    -ms-transition-duration3s1s;
    -o-transition-duration3s1s;
    transition-duration3s1s;
}

/* flip */

/* 讓front轉到看不見 */

.card.flip .front {

    z-index900;
    -webkit-transformrotateY(180deg);
    -moz-transformrotateY(180deg);
    -ms-transformrotateY(180deg);
    -o-transformrotateY(180deg);
    transformrotateY(180deg)
}

/* 將back轉出來 */

.card.flip .back {

    z-index1000;
    -webkit-transformrotateY(360deg);
    -moz-transformrotateY(360deg);
    -ms-transformrotateY(360deg);
    -o-transformrotateY(360deg);
    transformrotateY(360deg);
}


Live Demo

http://jsfiddle.net/6vsAX/9/
張貼留言

這個網誌中的熱門文章

解釋scope.$apply用來做什麼? -- AngularJS

Unions 在C語言的簡單介紹

JavaScript的Timer用法