之前我们有讨论过使用CSS3如何实现网页水平翻转的效果，而这次我们介绍的是翻转效果更深一层的应用——3D翻牌效果。
-webkit-perspective: 1000px; -moz-perspective: 1000px;perspective的中文意思是：透视，视角！该属性的存在与否决定了你所看到的是2次元的还是3次元的，也就是是2D transform还是3D transform. 这不难理解，没有透视，不成3D。 原理简述
也就是纸牌的前后面在两个不同的时间点进行flip效果，构成完整的纸牌翻面效果。 注：Chrome浏览器下需要让元素屏幕垂直居中，以保证元素均在视角内，避免部分区域不显示的情况发生。 以下是具体实现代码： HTML代码 <div id="box" class="box viewport-flip" title="点击翻面"> <a href="/" class="list flip out"><img src="element/puke-k.png" alt="纸牌正面" /></a> <a href="/" class="list flip"><img src="element/puke-back.png" alt="纸牌背面" /></a> </div> CSS代码 <style type="text/css">
.in {
-webkit-animation-timing-function: ease-out;
-webkit-animation-duration: 350ms;
animation-timing-function: ease-out;
animation-duration: 350ms;
}
.out {
-webkit-animation-timing-function: ease-in;
-webkit-animation-duration: 225ms;
animation-timing-function: ease-in;
animation-duration: 225ms;
}
.viewport-flip {
-webkit-perspective: 1000px;
perspective: 1000px;
position: absolute;
}
.flip {
-webkit-backface-visibility: hidden;
-webkit-transform: translateX(0); /* Needed to work around an iOS 3.1 bug that causes listview thumbs to disappear when -webkit-visibility:hidden is used. */
backface-visibility: hidden;
transform: translateX(0);
}
.flip.out {
-webkit-transform: rotateY(-90deg) scale(.9);
-webkit-animation-name: flipouttoleft;
-webkit-animation-duration: 175ms;
transform: rotateY(-90deg) scale(.9);
animation-name: flipouttoleft;
animation-duration: 175ms;
}
.flip.in {
-webkit-animation-name: flipintoright;
-webkit-animation-duration: 225ms;
animation-name: flipintoright;
animation-duration: 225ms;
}
@-webkit-keyframes flipouttoleft {
from { -webkit-transform: rotateY(0); }
to { -webkit-transform: rotateY(-90deg) scale(.9); }
}
@keyframes flipouttoleft {
from { transform: rotateY(0); }
to { transform: rotateY(-90deg) scale(.9); }
}
@-webkit-keyframes flipintoright {
from { -webkit-transform: rotateY(90deg) scale(.9); }
to { -webkit-transform: rotateY(0); }
}
@keyframes flipintoright {
from { transform: rotateY(90deg) scale(.9); }
to { transform: rotateY(0); }
}
.box {
width: 200px;
height: 282px;
padding-top: 30px;
padding-bottom: 30px;
margin-left: auto;
margin-right: auto;
position: relative;
}
.list {
position: absolute;
}
</style>
上述代码中flipintoright和flipouttoleft可根据需要自己定义牌的翻转方向（由左至右 or 由右至左）
JavaScript代码(需要Jquery库) <script type="text/javascript">
// 在前面显示的元素，隐藏在后面的元素
var eleBack = null, eleFront = null,
// 纸牌元素们
eleList = $(".list");
// 确定前面与后面元素
var funBackOrFront = function() {
eleList.each(function() {
if ($(this).hasClass("out")) {
eleBack = $(this);
} else {
eleFront = $(this);
}
});
};
funBackOrFront();
$("#box").bind("click", function() {
// 切换的顺序如下
// 1. 当前在前显示的元素翻转90度隐藏, 动画时间225毫秒
// 2. 结束后，之前显示在后面的元素逆向90度翻转显示在前
// 3. 完成翻面效果
eleFront.addClass("out").removeClass("in");
setTimeout(function() {
eleBack.addClass("in").removeClass("out");
// 重新确定正反元素
funBackOrFront();
}, 225);
return false;
});
</script>
文章来源 CODETC，欢迎分享，转载请注明地址：
http://www.codetc.com/article-125-1.html
|