<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>翻牌特效</title> </head> <style> div{ position: absolute; transition: 1s; } .wai{ width: 300px; height: 500px; background-color: red; } .wai div{ backface-visibility: hidden; width: 100%; height: 100%; } .front{ background-color: pink; } .back{ background-color: gray; transform: rotateY(180deg); } .wai:hover{ transform: scale(1.1); } .wai:hover .back{ transform: rotateY(0deg); } .wai:hover .front{ transform: rotateY(180deg); } </style> <body> <div class="wai"> <div class="front"></div> <div class="back"></div> </div> </body> </html>
原文：http://www.cnblogs.com/zonglonglong/p/6789055.html