https://jsfiddle.net/ACNzD/

先是html代码，很简单

  

    
1
    
2
  

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; 这项很关键，意思是面向浏览器正面的显示，反面的隐藏

   https://www.w3school.com.cn/cssref/pr_backface-visibility.asp<喎?http://www.weiyer.com/Search.asp?KeyWord=/kf/ware/vc/" target="_blank" class="keylink">vcD4KPHA+anO0+sLrPC9wPgo8cD48cHJlIGNsYXNzPQ=="brush:java;">$("figure").click(function(){ $(this).toggleClass("flip"); });