<!DOCTYPE html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> <title>CSS3卡牌翻牌效果</title> <style type="text/css"> #box { width: 200px; height: 337px; /*background: url('tarot_back.jpg') 0 0 no-repeat;*/ /*background: red;*/ -webkit-transition: -webkit-transform 0.4s ease-in, width 1s, background 0.8s; } .nor { background: red; -webkit-transform: rotate3d(0, 1, 0, 0deg); } .back { background: green; -webkit-transform: rotate3d(0, 1, 0, 180deg); } </style> </head> <body> <div id="box" class="nor"> </div> </body> <script type="text/javascript"> function $(d) { return document.getElementById(d); } var box = $('box'); box.addEventListener('click', function (e) { box.className = 'back'; setTimeout(function () { box.className = 'nor'; }, 500); }, false); </script> </html>