基本結(jié)構(gòu)
<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style>
*{margin: 0;padding: 0;}
.wutai{position: relative;perspective: 800px;width: 220px;height: 292px;transform-style: preserve-3d;}
#trans{position: absolute;width: 100%;height: 100%;transition: all 1s;transform-style: preserve-3d;}
.back{transform: rotateY(180deg);}
.flip{transform: rotateY(180deg);}
img{position: absolute;}
</style>
</head>
<body>
<div>
<button id="rot">旋轉(zhuǎn)</button>
</div>
<div class="wutai"> <!--舞臺(tái)-->
<div class="" id="trans"> <!--旋轉(zhuǎn)容器-->
</div>
</div>
<script>
document.getElementById('rot').addEventListener('click',function(){
if(document.getElementById('trans').className == 'flip'){
document.getElementById('trans').className = '';
}else{
document.getElementById('trans').className = 'flip';
}
})
</script>
</body>
</html>
舞臺(tái)元素：用于制作3D空間,并且也可以添加perspective來(lái)修改透視的值(舞臺(tái)元素不能使用overflow：hidden,要不然就看不到完整的翻轉(zhuǎn)效果)
旋轉(zhuǎn)容器：因?yàn)槲枧_(tái)元素的perspective效果只對(duì)直接后代起作用，為了讓旋轉(zhuǎn)容器的后代元素也繼承父元素的perspective效果，并且是在同一個(gè)3d空間中，可以在旋轉(zhuǎn)容器上使用transform-style:perserve-3d屬性。如果沒(méi)有設(shè)置這個(gè)屬性，卡片就是扁平的，就沒(méi)有翻轉(zhuǎn)效果。
為了在旋轉(zhuǎn)容器中定位圖片的兩個(gè)面，需要position：absolute來(lái)重置圖片的位置，并且為了隱藏圖片的反面，可以使用backface-visibility:hidden
可以看到圖片在首次旋轉(zhuǎn)時(shí)，過(guò)程中間有一段時(shí)空白的，但是第二次就正常了,我也不知道是什么原因?qū)е碌?，所以圖片上面我并沒(méi)有加這個(gè)屬性.
為了翻轉(zhuǎn)圖片的背面，需要在背面圖加上旋轉(zhuǎn)（rotateY(180deg)），讓背面圖默認(rèn)是反著的，等到容器再旋轉(zhuǎn)到180度的時(shí)候，背面圖就會(huì)顯現(xiàn)出來(lái)
現(xiàn)在只需要在旋轉(zhuǎn)容器上控制flip樣式，就可以出現(xiàn)卡片翻轉(zhuǎn)效果了。
如果我們需要更改旋轉(zhuǎn)的中心軸（默認(rèn)情況是居中的），可以給旋轉(zhuǎn)容器加上transform-origin屬性
參考資料
http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201502031323.html
http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/
