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

其中

1. -webkit-backface-visibility: hidden;

這項很關鍵，意思是面向瀏覽器正面的顯示，反面的隱藏

http://www.w3school.com.cn/cssref/pr_backface-visibility.asp

js代碼

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