今天在工作中遇到需求，需要用CSS3写一个卡片翻转效果，这个效果看起来简单，但是还是涉及到一些不常用的CSS3中的3D转换的属性以及实现该效果的思路，所以这里总结一下。
需要的CSS3属性
perspective
目前浏览器都不支持perspective属性
在chrome和Safari中需要使用-webkit-perspective，而在Firefox中需要使用-moz-perspective来定义。
perspective属性定义3D元素距视图的距离，以像素计。该属性允许改变查看3D元素的视图。当为元素定义
perspective，其子元素会获得透视效果，而不是元素本身。换句话说，设置这个元素是为了给该元素的子元素用。
transform-style
Firefox支持transfrom-style属性。
Chrome、Safari和Opera支持代替的-webkit-transform-style属性。
定义和用法
transform-style属性固定如何在3D空间中呈现被嵌套的元素。一般给父元素设置让其所有子元素跟着父元素一起位置移动，一般会设置。
值
flat：子元素将不保留其3D位置（默认值）
perserve-3d：子元素将保留其3D位置
transition
IE10+、Firefox、Opera、Chrome均支持transition属性。Safari支持替代的-webkit-transition属性。但是IE9-不支持该属性。
-
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轴旋转过的，这样，当鼠标移动上去后，同时让正面和背面执行旋转就可以实现翻牌效果。
HTML:
<div class="flip-container">
<div class="front">here is content : AA</div>
<div class="back">here is content : BB</div>
</div>CSS:
.flip-container {
-webkit-perspective: 500;
-moz-perspective: 500;
-ms-perspective: 500;
perspective: 500;
-ms-transform: perspective(500px);
-moz-transform: perspective(500px);
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
margin: 30px;
display: inline-block;
border: 1px solid #aaa;
position: relative;
}
/*由于内层绝对定位导致高度缺少，这里显式设置了宽高*/
.flip-container, .front, .back {
width: 200px;
height: 200px;
}
.flip-container:hover .front {
-webkit-transform: rotateY(180deg);
-moz-transform: rotateY(180deg);
-o-transform: rotateY(180deg);
-ms-transform: rotateY(180deg);
transform: rotateY(180deg);
}
.flip-container:hover .back {
-webkit-transform: rotateY(0deg);
-moz-transform: rotateY(0deg);
-o-transform: rotateY(0deg);
-ms-transform: rotateY(0deg);
transform: rotateY(0deg);
z-index: 3; /* 降级处理不支持CSS3的浏览器，只是简单的将back上升盖住front */
}
.front, .back {
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transition: 0.6s;
-moz-transition: 0.6s;
-o-transition: 0.6s;
-ms-transition: 0.6s;
transition: 0.6s;
position: absolute;
top: 0px;
left: 0px;
}
.front {
background: red;
z-index: 2;
}
.back {
background: green;
-webkit-transform: rotateY(-180deg);
-moz-transform: rotateY(-180deg);
-o-transform: rotateY(-180deg);
-ms-transform: rotateY(-180deg);
transform: rotateY(-180deg);
}