css3实现反转flip效果

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

其中

-webkit-backface-visibility: hidden;

这项很关键，意思是面向浏览器正面的显示，反面的隐藏
http://www.w3school.com.cn/cssref/pr_backface-visibility.asp
js代码

$("figure").click(function(){
$(this).toggleClass("flip");
});