核心提示：https://jsfiddle.net/ACNzD/先是html代码，很简单12css代码#card {width: 300px;height: 300px;position: relative;}...
https://jsfiddle.net/ACNzD/
先是html代码，很简单
css代码
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 );
}
其中
-
-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"); });
