http://jsfiddle.net/ACNzD/
先是html代码,很简单
<section class="container"> <div id="card"> <figure class="front">1</figure> <figure class="back">2</figure> </div> </section>css代码
#card { width: 300px; height: 300px; position: relative; } figure { display: block; height: 100%; width: 100%; line-height: 260px; color: white; text-align: center; font-weight: bold; font-size: 140px; position: absolute; -webkit-transition: -webkit-transform 1s; -webkit-backface-visibility: hidden; /* 很关键 */ } .front { background: red; } .back { background: #000; } .flip { -webkit-transform: rotateY( 180deg ); }
其中
http://www.w3school.com.cn/cssref/pr_backface-visibility.asp
js代码
$("figure").click(function(){ $(this).toggleClass("flip"); });