這篇文章主要介紹了CSS3製作翻轉效果的方法，CSS3打造3D翻牌效果，適用於撲克翻牌等遊戲，具有一定的參考價值，有興趣的小伙伴們可以參考一下
CSS3製作的翻牌效果，就是滑鼠移到元素上，感覺可以看到元素背後的訊息。大家如果製作考驗記憶力的連連看、撲克類的遊戲神馬的，甚至給女朋友寫一些話語，放在使用該實例製作的相冊之後都可以嘗試下，哈~
效果圖：
實例用到的一些css3的新屬性：
a、-webkit-perspective: 800px;
perspective （透視，視角）：屬性定義3D 元素距視圖的距離，以像素計。此屬性可讓您改變 3D 元素以查看 3D 元素的視圖。決定了你所看到的是2D transform 還是3D transform 。
b、-webkit-transform-style: preserve-3d;
transform-style 屬性規定如何在 3D 空間中呈現嵌套的元素。預設flat（平的），我們3D效果，然後選擇3D。
c、-webkit-backface-visibility: hidden;是否顯示該選擇元素旋轉到背面後的樣子。
d、-webkit-transform: rotateY(0);元素繞Y軸旋轉。
上面的屬性先給大家一個感性的認識，看完例子再細細品味這些屬性，或是baidu，google神馬的。
範例：
Html:
日本漫画家岸本齐史作品《火影忍者》中男主角。因为身上封印着邪恶的九尾妖狐，无父无母的他受尽了村人的冷眼与歧视，他下定决心要成为第六代火影，让所有人都认同他的存在。
日本漫画家岸本齐史作品《火影忍者》中的3号女主角。木叶忍者村的女忍者，木叶名门日向一族宗家族长的长女。喜欢漩涡鸣人，原本是个性格柔弱的女孩，但是在鸣人的影响下逐渐变得坚强，并逐渐成长为一名优秀的忍者。
蒙奇·D·路飞 是日本人气动漫 《海贼王》中的主人公。是日本人气动漫 《海贼王》中的主人公。草帽海贼团船长，梦想是找到传说中的宝藏 —— ONE PIECE，成为海贼王。
Danbo是一只用废纸盒DIY出来的可爱玩偶，圆圆的眼睛和三角形的嘴巴，时刻露出无辜的表情，让人看到就心软，Danbo是个纯真善良的小家伙，在它单纯的幻想世界里，总是透露出最纯真可爱的动人气息。
還是相當簡單的：
ul為一組圖片，每個li中都有個a(因為我們希望點擊圖片可以跳轉),a中包含兩個p，一個是正常顯示時的（即顯示圖片），一個是圖片旋轉後顯示的（即介紹）。 
預設旋轉元素的中心點就是旋轉中心（可以透過transform-origin修改），x，y軸都在圖上，z軸是從中心往外發的箭頭（就是螢幕射向你頭的箭頭）。
我們例子中，預設圖片rotateY=0;滑鼠指向為rotateY=-180，負數，也就是逆時針繞y軸旋轉，正數，則為順時針；其他兩個軸同理；
我們例子的核心就是滑鼠指向時：圖片（p:first-child），從0度繞y軸逆時針旋轉180度到達-180度；引言（p:last-child）從180度繞y軸逆時針旋轉180度到達0度。造成兩個一起逆時針旋轉的效果。有人可能會問為啥介紹預設不是0度，這裡注意下，介紹逆時針旋轉180度之後是正面狀態，所以當倍圖片遮蓋時，相當於從正常狀態順時針旋轉了180度，因為滑鼠指向時需要恢復正常狀態。
perspective，有個技巧，對於舞台（動畫的父元素）設定。 transform-style對3d變化當然是3d了，沒啥好說的。
以上就是本文的全部內容，希望對大家的學習有幫助，更多相關內容請關注PHP中文網！
相關建議：
使用css如何讓背景圖片拉伸填充避免重複顯示
#########如何實現canvas環形倒數計時元件######################以上是用CSS3實現圖片翻轉效果的詳細內容。更多資訊請關注PHP中文網其他相關文章！
