大家有沒有看到過網上很炫的翻牌效果，牌正面對着我們，然后點擊一下，牌就被翻過來了，效果很酷炫，是不是很想知道是怎么實現的么，代碼很簡單，跟着小編往下走。
先給大家介紹一下翻牌的原理：
1、父容器設置設置perspective，讓其子元素支持3d透視。
注：perspective 屬性定義 3D 元素距視圖的距離，以像素計。該屬性允許您改變 3D 元素查看 3D 元素的視圖。當為元素定義 perspective 屬性時，其子元素會獲得透視效果，而不是元素本身。
2、牌正面和背面設置absolute屬性，讓正面的背面處於同一水平線上，用z-index屬性設置背面朝上
3、讓背面設置translateY(180)，沿y軸旋轉180度，背面朝后，backface-visibility屬性讓背對屏幕的時候隱藏隱藏。
4、hover屬性，當鼠標經過flip_wrap時，讓flip沿y軸旋轉180度，讓正面繞y軸旋轉180度到背面隱藏，背面沿y軸旋轉180轉到正面來。
原理就是這樣，下面就開始看具體代碼吧。
<div class="flip_wrap"><!-- 大容器 --> <div class="flip"><!--實現翻牌容器 --> <div class="side front"><!--牌正面 --> <img src="http://wap.cmread.com/rbc/t/content/repository/ues/image/s109/fpbg2.png"> </div> <div class="side back"><!-- 牌背面 --> <img src="http://wap.cmread.com/rbc/t/content/repository/ues/image/s109/fpbg.png"> </div> </div> </div>
.flip_wrap{ width:210px; height:220px; margin:0 auto; perspective:800px;/*perspective屬性定義3D元素距視圖的距離,以像素計。該屬性允許您改變 3D 元素查看 3D 元素的視圖。*/ -webkit-perspective:800px; -moz-perspective:800px; -ms-perspective:800px; -o-perspective:800px; } .flip{ width:210px; height:220px; backface-visibility:hidden;/*背對屏幕時隱藏*/ -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; -o-backface-visibility:hidden; transition: all 1s ease; /*為翻牌添加過渡效果*/ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transform-style: preserve-3d; /*子元素將保留其 3D 位置。*/ } .side{ width:100%; height:100%; position: absolute;/*讓背面和正面重疊*/ left:50%; margin-left:-105px; } .front{ z-index:2;/*讓正面朝上*/ } .back{ transform:rotateY(180deg); -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg); -ms-transform:rotateY(180deg); -o-transform:rotateY(180deg); } .flip_wrap:hover .flip{ transform:rotateY(180deg);(180); -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg); -ms-transform:rotateY(180deg); -o-transform:rotateY(180deg); }
<html> <head> <meta charset="UTF-8"> <title>翻牌</title> <style type="text/css"> body,div{margin:0;padding:0;} .flip_wrap{ width:210px; height:220px; margin:0 auto; perspective:800px;/*perspective屬性定義3D元素距視圖的距離,以像素計。該屬性允許您改變 3D 元素查看 3D 元素的視圖。*/ -webkit-perspective:800px; -moz-perspective:800px; -ms-perspective:800px; -o-perspective:800px; } .flip{ width:210px; height:220px; backface-visibility:hidden;/*背對屏幕時隱藏*/ -webkit-backface-visibility:hidden; -moz-backface-visibility:hidden; -ms-backface-visibility:hidden; -o-backface-visibility:hidden; transition: all 1s ease; /*為翻牌添加過渡效果*/ -webkit-transition: all 1s ease; -moz-transition: all 1s ease; -ms-transition: all 1s ease; -o-transition: all 1s ease; transform-style: preserve-3d; /*子元素將保留其 3D 位置。*/ } .side{ width:100%; height:100%; position: absolute;/*讓背面和正面重疊*/ left:50%; margin-left:-105px; } .front{ z-index:2;/*讓正面朝上*/ } .back{ transform:rotateY(180deg); -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg); -ms-transform:rotateY(180deg); -o-transform:rotateY(180deg); } .flip_wrap:hover .flip{ transform:rotateY(180deg);(180); -webkit-transform:rotateY(180deg); -moz-transform:rotateY(180deg); -ms-transform:rotateY(180deg); -o-transform:rotateY(180deg); } </style> </head> <body> <div class="flip_wrap"><!-- 大容器 --> <div class="flip"><!-- 實現翻牌容器 --> <div class="side front"><!-- 牌正面 --> <img src="http://wap.cmread.com/rbc/t/content/repository/ues/image/s109/fpbg2.png"> </div> <div class="side back"><!-- 牌背面 --> <img src="http://wap.cmread.com/rbc/t/content/repository/ues/image/s109/fpbg.png"> </div> </div> </div> </body> </html>
案例展示：
http://211.140.7.173:8081/t/wuhairui/fanpai/index.html