css3实现反转flip效果

当前位置 : 首页 > 网页制作 > CSS > css3实现反转flip效果

css3实现反转flip效果

来源: 作者: 时间:2016-01-25 10:02
http: jsfiddle net ACNzD 先是html代码,很简单 1 2 css代码 card { width: 300px; height: 300px; position: relative;}figure {display:

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

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

    Tag:
网友评论

<