旋转效果

<!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