使用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); } 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
打赏

免责声明!

本站转载的文章为个人学习借鉴使用,本站对版权不负任何法律责任。如果侵犯了您的隐私权益,请联系本站邮箱yoyou2525@163.com删除。



 
粤ICP备18138465号  © 2018-2021 CODEPRJ.COM