資訊專欄INFORMATION COLUMN
摘要：所以給父元素添加至此，就實現了一個翻轉卡牌的效果，但是這里需要解決一個問題，因為屬性不被支持支持，所以需要進行降級，我的做法是直接顯示隱藏。
今天在工作中遇到需求，需要用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-styleFirefox支持transfrom-style屬性。
Chrome、Safari和Opera支持代替的-webkit-transform-style屬性。
定義和用法transform-style屬性固定如何在3D空間中呈現被嵌套的元素。一般給父元素設置讓其所有子元素跟著父元素一起位置移動，一般會設置。
值flat：子元素將不保留其3D位置（默認值）
perserve-3d：子元素將保留其3D位置
transitionIE10+、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軸旋轉過的，這樣，當鼠標移動上去后，同時讓正面和背面執行旋轉就可以實現翻牌效果。
實現基本結構代碼如下：
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 screen9{
ie67{property:value;}
}
or
.ie67{ *property:value;}
or
.ie67{ #property:value;}
IE6,7 and 8
@media