<!DOCTYPE html>
<html>
<head lang="en">
<meta charset="UTF-8">
<title></title>
<style type="text/css">
a{ position: relative; display:block; 260px; height:350px; perspective:800px;}
a div{ position: absolute; top: 0; left: 0; 260px; height: 350px; transform:translateZ(0); transition:all .4s linear; backface-visibility:hidden; transform-style:preserve-3d;}
.front{ background:url("../images/front.jpg") no-repeat; transform:rotateY(0deg); }
.back{ background:url("../images/back.jpg") no-repeat; transform:rotateY(-180deg); }
a:hover .front{ transform:rotateY(180deg); }
a:hover .back{ transform:rotateY(0deg); }
</style>
</head>
<body>
<a href="#">
<div class="front"></div>
<div class="back"></div>
</a>
</body>
</html>
思路：
正面图片从0转到180°，背面图片从-180°转到0