使用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