在线预览地址：http://dtdxrk.github.io/game/css3-demo/drawbox.html
用到两个属性：
一个是动画时间
transition-duration: 0.8s; -moz-transition-duration: 0.8s; -webkit-transition-duration: 0.8s; -o-transition-duration: 0.8s;
一个是3d
transform: rotate3d(0,1,0,-180deg); -webkit-transform: rotate3d(0,1,0,-180deg); -moz-transform: rotate3d(0,1,0,-180deg);
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<style>
*{margin:0; padding:0;}
.drawbox{ 200px;height: 200px; position: relative;-webkit-perspective:500px; }
.drawbox-front, .drawbox-behand{ position: absolute;top:0;left:0;z-index: 0;-webkit-transition-duration: 0.8s;-webkit-transform: rotate3d(0,1,0,180deg);}
.drawbox-front{z-index: 1;-webkit-transform: rotate3d(0,1,0,0deg);}
.drawbox:hover .drawbox-front{z-index: 0;-webkit-transform: rotate3d(0,1,0,-180deg);}
.drawbox:hover .drawbox-behand{z-index: 1;-webkit-transform: rotate3d(0,1,0,0deg);}
</style>
</head>
<body>
<div class="drawbox">
<div class="drawbox-front"><img width="200" height="200" src="http://car1.autoimg.cn/car/carnews/2015/4/14/d_201504141931123924435110.jpg" alt=""></div>
<div class="drawbox-behand"><img width="200" height="200" src="http://car1.autoimg.cn/car/carnews/2015/4/14/d_201504142232044255132110.jpg" alt=""></div>
</div>
<div class="drawbox">
<div class="drawbox-front"><img width="200" height="200" src="http://pic.cnmo-img.com.cn/201501/cnmo200180_03_0107.jpg" alt="" border="0"></div>
<div class="drawbox-behand"><img width="200" height="200" src="http://pic.cnmo-img.com.cn/201412/ZET2486hp200180news_1224.gif" alt="" border="0"></div>
</div>
</body>
</html>