使用JS与CSS3的翻转实现3D翻牌效果
Posted Jacey
tags:
篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了使用JS与CSS3的翻转实现3D翻牌效果相关的知识,希望对你有一定的参考价值。
之前我们有讨论过使用CSS3如何实现网页水平翻转的效果,而这次我们介绍的是翻转效果更深一层的应用——3D翻牌效果。
这里我们需要使用flip中轴翻转实现,又因为是3D效果,如果希望呈现一定的3D视角,需要在父级元素上添加类名viewport-flip或者直接添加如下CSS:
-webkit-perspective: 1000px;
-moz-perspective: 1000px;
perspective的中文意思是:透视,视角!该属性的存在与否决定了你所看到的是2次元的还是3次元的,也就是是2D transform还是3D transform. 这不难理解,没有透视,不成3D。
原理简述
- 当前在前显示的元素翻转90度后隐藏, 动画时间225毫秒
- 225毫秒结束后,之前显示在后面的元素逆向90度翻转显示在前
- 完成翻面效果
也就是纸牌的前后面在两个不同的时间点进行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)