CSS3 卡牌翻转

最终效果

基本结构

    


    
    
    



    旋转

    
  
        
  
            ![](http://upload-images.jianshu.io/upload_images/215275-24cfe778b9683be9.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
            ![](http://upload-images.jianshu.io/upload_images/215275-10b53a6a57ad9279.jpg?imageMogr2/auto-orient/strip%7CimageView2/2/w/1240)
        
    

舞台元素：用于制作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/