一個純CSS實現的卡片翻轉效果

先上代碼

<div id="box">
    <div class="front">正面</div>
    <div class="back">反面</div>
</div>

       #box{
            width:200px;
            height:200px;
            position:relative;
            perspective:500;
            -webkit-perspective:500;
        }
        #box div{
            position:absolute;
            top:0;
            left:0;
            width:100%;
            height:100%;
            background:.#fff;
            -webkit-perspective:10000;
            backface-visibility:hidden;
            -webkit-transition: all 2s;
            -moz-transition: all 2s;
            -ms-transition: all 2s;
            -o-transition: all 2s;
        }
        #box .front{
            background:#f00;
        }
        #box .back{
            background:#00f;
            -webkit-transform:rotateY(-180deg);
        }
        #box:hover .front{
            -webkit-transform:rotateY(-180deg);
        }
        #box:hover .back{
            -webkit-transform:rotateY(-360deg);
        }        

原理:這個卡片翻轉效果是利用背面的內容一開始就先翻轉180度,等正面翻轉的時候背面再翻轉360度,這樣子背面翻轉到面對屏幕的時候內容卻是正的而不是反的

代碼解析:

這里主要用到了CSS3的一些新的屬性:perspective;

　　　　　　　　　　　　　　　　　　backface-visibility:hidden;

　　　　　　　　　　　　　　　　　　transition:all 2s;

　　　　　　　　　　　　　　　　　　transform:rotateY(Ndeg);

下面對這些屬性進行詳細的說明.

1.perspective:number|none(默認)

主要用來表示3D元素距離視圖的距離,單位是像素,定義在父元素上,子元素就會獲得透視效果,目前瀏覽器都在不支持,chrom和safari支持擴展的-webkit-perspectiv.

這個屬性能查到的資料上基本上都是這么講的,感覺不是很理解什么事透視效果,在我看來,使用這個屬性就是在3D轉換的時候能夠看到立體的3D效果,可以配合perspective-origion來使用,可惜的是目前只有chrom和safari支持帶有瀏覽器屬性前綴的該屬性.

2.backface-visibility:visiale|hidden

該屬性用來定義當元素不面向屏幕的時候是否可見,可用來設置旋轉元素是否希望用來看到背面.IE10+和Firefox支持該屬性,Opera 15+、Safari 和 Chrome 支持替代的 -webkit-backface-visibility 屬性

3.transition:css屬性名稱 完成動畫的時間 規定速度效果的速度曲線 定義過渡效果何時開始

transition是一個簡寫屬性,用來設置四個屬性:transition-property, transition-duration, transition-timing-function, transition-delay,一般為了省事直接就會寫作transition:all 2s。過渡時間必須設置，否則不會產生過渡效果。IE10+,chrome,opera,Firefox支持transition屬性,Safari支持替代的-webkit-transition屬性

transition-timing-function:linear(勻速)|ease(默認.慢速開始,加快,慢速結束)|ease-in(慢速開始)|ease-out(慢速結束)|ease-in-out(慢速開始,慢速結束)|cubic-bezier(n,n,n,n)貝賽爾曲線

4.transform:rotateY(Ndeg)

兼容性不說那么多了,感覺反正用的時候全部加上瀏覽器前綴好啦.

主要是用來定義各種變換的,translate,scale,rotate,skew,可惜熟悉使用一下,用的還是比較多的