CSS3實現翻轉卡牌效果

今天在工做中遇到需求，須要用CSS3寫一個卡片翻轉效果，這個效果看起來簡單，可是仍是涉及到一些不經常使用的CSS3中的3D轉換的屬性以及實現該效果的思路，因此這裏總結一下。

原文連接：http://mrzhang123.github.io/2016/08/17/FlipCards/

項目地址：https://github.com/MrZhang123/Practice/tree/master/FlipCards

須要的CSS3屬性

perspective

目前瀏覽器都不支持perspective屬性

在chrome和Safari中須要使用-webkit-perspective，而在Firefox中須要使用-moz-perspective來定義。

定義和用法

perspective屬性定義3D元素距視圖的距離，以像素計。該屬性容許改變查看3D元素的視圖。當爲元素定義

perspective屬時，其子元素會得到透視效果，而不是元素自己。換句話說，設置這個元素是爲了給該元素的子元素用。

值

number：元素距離視圖的距離，以像素計

none：默認值，與0相同。不設置透視

transform-style

Firefox支持transfrom-style屬性。

Chrome、Safari和Opera支持代替的-webkit-transform-style屬性。

定義和用法

transform-style屬性固定如何在3D空間中呈現被嵌套的元素。通常給父元素設置讓其全部子元素跟着父元素一塊兒位置移動，通常會設置。

值

flat：子元素將不保留其3D位置（默認值）

perserve-3d：子元素將保留其3D位置

transition

IE10+、Firefox、Opera、Chrome均支持transition屬性。Safari支持替代的-webkit-transition屬性。可是IE9-不支持該屬性。

定義和用法

transition屬性是一個簡寫屬性，用於設置四個過渡屬性：

• transiton-property：規定設置過渡效果的CSS屬性的名稱

• transiton-duration：規定完成過渡效果須要多少秒或毫秒

• transiton-timing-funciton：規定速度效果的速度曲線

• transition-delay：規定過渡效果什麼時候開始

transiton-duration必須設置，不然時長爲0 ，不會有過渡效果

backface-visibility

只有IE10+和Firefox支持backface-visibility，Opera15+、Safari和Chrome支持替代的-webkit-backface-visibility

定義和用法

backface-visibility屬性定義當前元素不面向屏幕時是否可見，若是元素在旋轉後不但願看到背面，則能夠使用。

visible：背面是可見的（默認值）

hidden：背面是不可見的

實現的思路

要實現相似的翻牌效果，首先咱們須要有一張能夠翻的牌，這張牌由兩個元素重疊組成，位於上層正面咱們看到，而位於下層的背面咱們看不到而且自己是繞Y軸旋轉過的，這樣，當鼠標移動上去後，同時讓正面和背面執行旋轉就能夠實現翻牌效果。

實現

基本結構代碼以下：

<div id="content">
    <ul>
        <li>
            <a href="#" >
                <div>
                    <h3>測試正面1</h3>
                    <p>文字文字文字文字文字文字文字文字文字文字文字</p>
                </div>
                <div>
                    <h3>測試背面1</h3>
                    <p>文字文字文字文字文字文字文字文字文字文字文字</p>
                </div>
            </a>
        </li>        
    </ul>
</div>

ul,li {
    margin:0;
    padding:0;
    list-style:none;
}
#content ul li{
    width: 225px;
    height: 180px;
}
#content ul li a{
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
}
#content ul li a > div{
    position: absolute;
    left: 0;
    height: 0;
    width: 100%;
    height: 100%;
    color: #fff;
}
#content ul li a div:first-child{
    background-color: rgb(255, 64, 129);
    z-index:2;
}
#content ul li a div:last-child{
    background:rgb(0, 188, 212);
    z-index:1;
}
#content ul li a div h3{
    margin: 0 auto 15px;
    padding: 15px 0;
    width: 200px;
    height: 16px;
    line-height: 16px;
    font-size: 14px;
    text-align: center;
    border-bottom: 1px #fff dashed;
}

#content ul li a div p{
    padding: 0 10px;
    font-size: 12px;
    text-indent: 2em;
    line-height: 18px;
}

這樣就讓兩個div疊在一塊兒了，可是若是要進行翻轉的話，首先是須要將背面自己就翻過去，當鼠標放上去以後翻轉過來，讓咱們看到，因此咱們須要給背面添加翻轉180°的屬性，鼠標放上去以後讓它翻轉到0°，同時爲保證每一個瀏覽器渲染統一，給正面加一個翻轉0°，鼠標移動上去以後翻轉-180°，而且是一個動畫，因此要添加過渡。因此給正面背面添加CSS以下：

#content ul li a > div{
    -webkit-transition:.8s ease-in-out;
    -moz-transition:.8s ease-in-out;
}
#content ul li a div:first-child{
    -webkit-transform:rotateY(0);
    -moz-transform:rotateY(0);
}
#content ul li a div:last-child{
    -webkit-transform:rotateY(180deg);
    -moz-transform:rotateY(180deg);
}
#content ul li a:hover div:first-child{
    -webkit-transform:rotateY(-180deg);
    -moz-transform:rotateY(-180deg);
}
#content ul li a:hover div:last-child{
    -webkit-transform:rotateY(0);
    -moz-transform:rotateY(0);
}

在添加這些CSS3屬性後，能夠實現翻轉，可是發現只看到正面，沒有看到背面，這又是爲何呢，前面提到有一個屬性backface-visibility，這個屬性用於控制在翻轉後，元素的背面是否可見，默認是可見的，因此就會擋着背面那個元素，咱們須要手動設置元素翻轉後背面不可見，因此須要設置：

#content ul li a > div{
     -webkit-backface-visibility: hidden;
     -moz-backface-visibility: hidden;
}

這樣設置以後，因爲正面的元素在翻轉後背面不可見，咱們就能夠看到背面的元素了。

可是，仔細觀察會發現這個翻轉彷佛並非那麼立體，彷佛在兩條平行線之間實現了翻轉，因此咱們須要設置一個觀察點距離視圖的距離，這時候就須要給父元素添加perspective屬性，這個屬性的值通常爲800px ~ 1000px，這個範圍內的值會看上去合理。因此給父元素添加：

#content ul li a{
    -webkit-perspective: 800px;
    -moz-perspective: 800px;
}

至此，就實現了一個翻轉卡牌的效果，可是這裏須要解決一個問題，由於perspective屬性不被IE支持（Microsoft Edge支持），因此須要進行降級，個人作法是直接顯示隱藏。那麼如何識別IE9+瀏覽器呢？在stackoverflow中我找到了答案：

附：CSS中識別各種IE的方法

IE6

* html .ie6{
    property:value;
}

or

html .ie6{
    _property:value;
}

IE7

*+html .ie7{
    property:value;
}

or

*:first-child+html ie7{
    property:value;
}

IE6 and IE7

@media screen\9{
    ie67{property:value;}
}

or

.ie67{ *property:value;}

or

.ie67{ #property:value;}

IE6,7 and 8

@media \0screen\,screen\9{
    ie678{property:value;}
}

IE8

html>/**/body .ie8{property:value;}

or

@media \0screen{
    ie8{property:value;}
}

只在IE8標準模式

.ie8{property/*\**/:value\9;}

IE8,9 and 10

@media screen\0{
    ie8910{property:value;}
}

IE9 only

@media screen and (min-width:0\0) and (min-resolution: .001dpcm){
    /*IE9 CSS*/
    .ie9{property:value;}
}

IE9+

@media screen and (min-width:0\0) and (min-resolution: +72dpi){
    /*IE9+ CSS*/
    .ie9up{property:value;}
}

IE9 and 10

@media screen and (min-width:0){
    .ie910{property:value;}
}

IE10 only

_:-ms-lang(x), ie10 {property:value;}

IE10+

_:-ms-lang(x), ie10up{property:value;}

or

@media all and (-ms-high-contrast:none),(-ms-high-contrast:active){
    .ie10up{property:value;}
}

IE11+

_:-ms-fullscreen, :root .ie11up{property:value;}