<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style type="text/css"> a{ position: relative; display:block; width:260px; height:350px; perspective:800px;} a div{ position: absolute; top: 0; left: 0; width: 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