css3实现反转flip效果
浏览数：22 /
时间：2015年06月09日
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 );
}
其中
http://www.w3school.com.cn/cssref/pr_backface-visibility.asp
js代码
$("figure").click(function(){
$(this).toggleClass("flip");
});郑重声明：本站内容如果来自互联网及其他传播媒体，其版权均属原媒体及文章作者所有。转载目的在于传递更多信息及用于网络分享，并不代表本站赞同其观点和对其真实性负责，也不构成任何其他建议。
