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");
});