一個純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,惋惜熟悉使用一下,用的仍是比較多的