最终效果
基本结构
<!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">旋转</button>
</div>
<div class="wutai"> <!--舞台-->
<div class="" id="trans"> <!--旋转容器-->
</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>
舞台元素：用于制作3D空间,并且也可以添加perspective来修改透视的值(舞台元素不能使用overflow：hidden,要不然就看不到完整的翻转效果)
舞台元素加上overflow效果
旋转容器：因为舞台元素的perspective效果只对直接后代起作用，为了让旋转容器的后代元素也继承父元素的perspective效果，并且是在同一个3d空间中，可以在旋转容器上使用transform-style:perserve-3d属性。如果没有设置这个属性，卡片就是扁平的，就没有翻转效果。
去除transform-style的效果
为了在旋转容器中定位图片的两个面，需要position：absolute来重置图片的位置，并且为了隐藏图片的反面，可以使用backface-visibility:hidden
图片加上backface-visibility属性
可以看到图片在首次旋转时，过程中间有一段时空白的，但是第二次就正常了,我也不知道是什么原因导致的，所以图片上面我并没有加这个属性.
为了翻转图片的背面，需要在背面图加上旋转（rotateY(180deg)），让背面图默认是反着的，等到容器再旋转到180度的时候，背面图就会显现出来
现在只需要在旋转容器上控制flip样式，就可以出现卡片翻转效果了。
如果我们需要更改旋转的中心轴（默认情况是居中的），可以给旋转容器加上transform-origin属性
旋转容器加上transform-origin: right center;
参考资料
http://www.htmleaf.com/ziliaoku/qianduanjiaocheng/201502031323.html
http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/
