今天在工作中遇到需求，需要用css3寫乙個卡片翻轉效果，這個效果看起來簡單，但是還是涉及到一些不常用的css3中的3d轉換的屬性以及實現該效果的思路，所以這裡總結一下。
目前瀏覽器都不支援perspective屬性
在chrome和safari中需要使用-webkit-perspective，而在firefox中需要使用-moz-perspective來定義。
定義和用法
perspective屬性定義3d元素距檢視的距離，以畫素計。該屬性允許改變檢視3d元素的檢視。當為元素定義
perspective屬時，其子元素會獲得透視效果，而不是元素本身。換句話說，設定這個元素是為了給該元素的子元素用。
值number：元素距離檢視的距離，以畫素計
none：預設值，與0相同。不設定透視
firefox支援transfrom-style屬性。
chrome、safari和opera支援代替的-webkit-transform-style屬性。
定義和用法
transform-style屬性固定如何在3d空間中呈現被巢狀的元素。一般給父元素設定讓其所有子元素跟著父元素一起位置移動，一般會設定。
值flat：子元素將不保留其3d位置（預設值）
perserve-3d：子元素將保留其3d位置
ie10+、firefox、opera、chrome均支援transition屬性。safari支援替代的-webkit-transition屬性。但是ie9-不支援該屬性。
定義和用法
transition屬性是乙個簡寫屬性，用於設定四個過渡屬性：
transiton-duration必須設定，否則時長為0 ，不會有過渡效果
只有ie10+和firefox支援backface-visibility，opera15+、safari和chrome支援替代的-webkit-backface-visibility
定義和用法
backface-visibility屬性定義當前元素不面向螢幕時是否可見，如果元素在旋轉後不希望看到背面，則可以使用。
visible：背面是可見的（預設值）
hidden：背面是不可見的
要實現類似的翻牌效果，首先我們需要有一張可以翻的牌，這張牌由兩個元素重疊組成，位於上層正面我們看到，而位於下層的背面我們看不到並且本身是繞y軸旋轉過的，這樣，當滑鼠移動上去後，同時讓正面和背面執行旋轉就可以實現翻牌效果。
基本結構**如下：
ul,li
#content ul li
#content ul li a
#content ul li a > div
#content ul li a div:first-child
#content ul li a div:last-child
#content ul li a div h3
#content ul li a div p
#content ul li a > div
#content ul li a div:first-child
#content ul li a div:last-child
#content ul li a:hover div:first-child
#content ul li a:hover div:last-child
backface-visibility，這個屬性用於控制在翻轉後，元素的背面是否可見，預設是可見的，所以就會擋著背面那個元素，我們需要手動設定元素翻轉後背面不可見，所以需要設定：
#content ul li a > div但是，仔細觀察會發現這個翻轉似乎並不是那麼立體，似乎在兩條平行線之間實現了翻轉，所以我們需要設定乙個觀察點距離檢視的距離，這時候就需要給父元素新增perspective屬性，這個屬性的值一般為800px ~ 1000px，這個範圍內的值會看上去合理。所以給父元素新增：
#content ul li aperspective屬性不被ie支援（microsoft edge支援），所以需要進行降級，我的做法是直接顯示隱藏。那麼如何識別ie9+瀏覽器呢？在stackoverflow中我找到了答案：
* html .ie6html .ie6*+html .ie7*:first-child+html ie7@media screen\9
}
.ie67.ie67@media \0screen\,screen\9
}
html>/**/body .ie8@media \0screen
}
.ie8@media screen\0
}
@media screen and (min-width:0\0) and (min-resolution: .001dpcm)
}
@media screen and (min-width:0\0) and (min-resolution: +72dpi)
}
@media screen and (min-width:0)
}
_:-ms-lang(x), ie10_:-ms-lang(x), ie10up@media all and (-ms-high-contrast:none),(-ms-high-contrast:active)
}
_:-ms-fullscreen, :root .ie11upcss卡牌翻轉效果
卡牌翻轉的步驟 1.最外層wrap設定檢視距離perspective 800px 相對定位position relative 2.父級 box設定轉換為3d效果transform style preserve 3d 3.旋轉元素設定 背景不透視 backface visibility hidden ...
CSS3實現翻轉 Flip 效果
今天，我們用比較簡潔的css3來實現翻轉效果。當滑鼠滑過包含塊時，元素整體翻轉180度，以實現 正 反 面的切換。分析 container，flip為了實現動畫效果做準備。front,back各包裹一張。實現該效果的html如下 1.元素布局 為了實現以上效果，先進行元素布局。給.front,bac...
CSS3實現翻轉 Flip 效果
class container class flip class front div class back div div div 為了讓卡片的正面和背面在相同位置重疊，給.front,back相對定位.flip進行絕對定位 container,front,back flip front,back ...