主要知識點：rotate旋轉以及 outline透明的像素消除（明顯降低）火狐旋轉是產生的 鋸齒
首先看結構：
1 <li class="flip-container " ontouchstart="this.classList.toggle('hover');"> 2 <a href="brandLi.html" class="flipper"> 3 <div class="front">前面</div> 4 <div class="back" >后面</div> 5 </a> 6 </li>
結構上沒啥特別的，注意 里面的 front 和back 用絕對位置；以防出現問題
直接用 HTML5 API里：classList；
在HTML5 API里，頁面DOM里的每個節點上都有一個classList對象，可以使用里面的方法新增、刪除、修改節點上的CSS類。使用classList，也可以用它來判斷某個節點是否被賦予了某個CSS類；
{
length: {number}, /* # of class on this element */
add: function() { [native code] },
contains: function() { [native code] },
item: function() { [native code] }, /* by index */
remove: function() { [native code] },
toggle: function() { [native code] }
}
還有一個小問題，就是旋轉時候，哪怕不旋轉 單獨設置 -moz-transform: rotateY(30deg); 火狐瀏覽器下面 元素邊緣鋸齒問題比較明顯注意firebug 調試 outline屬性
上訴圖片 藍色的 設置了起始旋轉30度，火狐下明顯有鋸齒。別的瀏覽器沒有很仔細的觀察，這是加個屬性 outline:1px solid transparent;
<div class="front " style="outline:1px solid transparent;background:blue; color:#fff; -moz-transform: rotateY(30deg);overflow:hidden;">前面 針對火狐 outline:1px solid transparent用於消除鋸齒</div>
另外 ，總感覺好像哪里不協調；如果仔細觀察，會發現網上的某些3D翻轉效果和我上邊的例子的效果有些不同。如果你使用右邊為軸進行翻轉，你會發現卡片會翻出容器之外。這不僅僅是翻轉了卡片，還使卡片的的邊從右邊移動到了左邊； 要針對處理 transform-origin: right center; 以及水平位移的距離 transform: translateX( -100% ) rotateY( -Xdeg ); 下面代碼中沒有優化； 360 瀏覽器支持的不是很好
下面附上代碼：
1 <!doctype html> 2 <html> 3 <head> 4 <meta charset="utf-8"> 5 <title>css3 翻牌 以及css3邊緣鋸齒問題</title> 6 </head> 7 8 <body> 9 <style> 10 *{ margin:0; padding:0;} 11 ul,li{ list-style:none; margin:0; padding:0;} 12 13 14 .brandsShow{ width:1200px; height:620px; margin:0 auto; } 15 .brandsShow ul{ margin-left:-20px; width:1225px; height:auto; } 16 .brandsShow ul li{ float:left; display:inline; width:283px; height:424px; } 17 18 .flip-container {perspective: 1000; 19 -webkit-perspective: 1000px; /*父類容器中 perspective 子類允許透視*/ 20 -moz-perspective: 1000px; 21 -ms-perspective: 1000px; 22 -o-perspective: 1000px; 23 perspective: 1000px; 24 margin:0px auto; 25 float:left; margin-left:20px; margin-bottom:20px; border:1px solid #333; 26 } 27 28 29 .flip-container, .front, .back {width: 283px;height: 424px;} 30 31 .front, .back { 32 backface-visibility: hidden; 33 overflow:hidden; 34 -webkit-transition: .8s ease-out; 35 transition: .8s ease-out; 36 -webkit-transform-style: preserve-3d; /* 子類保留3d動畫結果*/ 37 -moz-transform-style: preserve-3d; 38 -ms-transform-style: preserve-3d; 39 -o-transform-style: preserve-3d; 40 transform-style: preserve-3d; 41 position: absolute;top: 0;left: 0; /*動畫元素最好絕對位置*/ 42 } 43 44 .front img, .back img{ width:283px; height:424px; } 45 46 .front {z-index: 2; /*起始設置層 hover時候改變*/ 47 -webkit-transform: rotateY(0deg); 48 -moz-transform: rotateY(0deg); 49 -ms-transform: rotateY(0deg); 50 -o-transform: rotateY(0deg); 51 transform: rotateY(0deg); 52 } 53 54 .back { z-index:1;/*起始設置層 hover時候改變*/ 55 -webkit-transform: rotateY(-180deg); 56 -moz-transform: rotateY(-180deg); 57 -ms-transform: rotateY(-180deg); 58 -o-transform: rotateY(-180deg); 59 transform: rotateY(-180deg); 60 } 61 62 63 64 .flipper { 65 -webkit-transition: transform .8s ease-in-out; 66 -moz-transition: transform .8s ease-in-out; 67 -ms-transition: transform .5s ease-in-out; 68 -o-transition: transform .5s ease-in-out; 69 transition: transform .5s ease-in-out; 70 71 -webkit-transform-style: preserve-3d; /*使其子類變換后得以保留 3d轉換后的位置*/ 72 -moz-transform-style: preserve-3d; 73 -ms-transform-style: preserve-3d; 74 -o-transform-style: preserve-3d; 75 transform-style: preserve-3d; 76 display:block;position: relative; 77 } 78 79 80 .flip-container:hover .back { 81 -webkit-transform: rotateY(0deg); 82 -moz-transform: rotateY(0deg); 83 -ms-transform: rotateY(0deg); 84 -o-transform: rotateY(0deg); 85 transform: rotateY(0deg); 86 z-index:2; 87 } 88 89 .flip-container:hover .front { 90 -webkit-transform: rotateY(180deg); 91 -moz-transform: rotateY(180deg); 92 -ms-transform: rotateY(180deg); 93 -o-transform: rotateY(180deg); 94 transform: rotateY(180deg); 95 z-index:10; 96 } 97 98 99 </style> 100 101 102 <ul style=" margin-top:30px;"> 103 <li class="flip-container " ontouchstart="this.classList.toggle('hover');"> 104 <a href="brandLi.html" class="flipper"> 105 <div class="front " style="outline:1px solid transparent; overflow:hidden"><img src="../images/TaylorSwift.jpg">前面</div> 106 <div class="back " ><img src="../images/ameriancaptain.jpg">后面</div> 107 </a> 108 </li> 109 110 <li class="flip-container " ontouchstart="this.classList.toggle('hover');"> 111 <a href="brandLi.html" class="flipper"> 112 <div class="front " style="outline:1px solid transparent;background:blue; overflow:hidden; color:#fff;">前面 針對火狐 outline:1px solid transparent用於消除鋸齒</div> 113 <div class="back " style="outline:1px solid transparent;background:#333; color:#fff">后面</div> 114 </a> 115 </li> 116 </ul> 117 118 </body> 119 </html>
順便提一句：
1，ie 6 ， ie7 js也是支持rotate() 的；不過運動中心默認不是 transform-origin：center center；需要js修正；
2，transform屬性：skew，rotate,translate 等其實歸更到底都是通過matrix矩陣變換實現的;
下面說明 matrix的屬性
本文地址：http://www.cnblogs.com/surfaces/