css3翻转效果

我爱模板网的一个项目需要用到反转效果，即正常情况下看到的是正面的缩略图，鼠标移动上去，就会翻转过去，看到反面简介、跳转按钮等。那么实现这种效果，可以简单分析下：
1、html需要有个父标签来提供定位依据，正反面肯定是两个子容器，这两个容器肯定定位在一起，并且一样大小。
2、两个子容器肯定要能够旋转，所以需要用到transform的rotateY来实现，同时需要注意，必须加上backface-visibility: hidden，即背面不可见，不然正面翻转过来，你将看到正面的字或图翻转了180°，却并没有看到正面下面的背面。
3、两个自容器需要加上transition过度动画
4、上面已经实现了反转效果，但是没有近大远小的立体效果，需要给父容器加上视距，即perspective
5、最终代码如下：

<style type="text/css">
    .father{width: 200px; height: 400px; margin:auto; font-size:100px; line-height: 400px; text-align: center; position: relative; perspective: 600px;}
    .father div{position: absolute; top:0; left: 0; width: 100%; height: 100%; transition:all .4s ease-in-out; backface-visibility: hidden;}
    .front{background:#eee; color: #333; transform: rotateY(0); z-index: 1}
    .back{background:#333; color: #fff; transform: rotateY(-180deg); z-index: 2;}
    .father:hover .front{transform: rotateY(-180deg);}
    .father:hover .back{transform: rotateY(0);}
</style>
<div class="father">
    <div class="front">
        前
    </div>
    <div class="back">
        后
    </div>
</div>