css3实现反转flip效果 - html/css语言栏目：html.css

http://jsfiddle.net/ACNzD/

先是html代码，很简单

 
  
   
   
    1
    
   
    2
    
  

 

#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<喎"http://www.2cto.com/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+anO0+sLrPC9wPgo8cD48cHJlIGNsYXNzPQ=="brush:java;">$("figure").click(function(){ $(this).toggleClass("flip"); });