設計思路：
首先做一個包括圖片和說明文字的簡單的頁面結構，然后再設置它的變換。將變換的元素，即照片和文字放在一個父容器里面，這就需要四個父容器 ，再將這四個父容器放在最外層的舞台上面進行變換，在每個父容器里面都包括兩部分：一個是上面的圖片，還有一個是下面的說明文字。最后采用層定位將圖片和下面的說明文字讓它有一個疊加的效果。先顯示這個圖片，當鼠標懸停在上面的時候，由於做了3D變換，（即每幅圖片翻轉的效果是圍繞Y軸翻轉180度來進行的），那么后面的文字就會被顯示出來。
㈠HTML主頁文件的基本結構
先做一個整個需要變換元素它的一個結構。最外層有一個舞台，放在一個盒子里面，給舞台起一個名字，叫“piclist”。由於當前的舞台只用到一個，就使用ID來進行引用，用“#”號來定義，舞台里面有四組需要變換的元素，做4個盒子作為父容器，給父容器起一個名字，叫“picbox”，采用class來引用這個樣式，父容器里面有兩個部分需要變換的元素，正面部分放入圖片，背面部分放入說明的文字。正面和背面都有共同的樣式，將它們共同的樣式用class來引用，放在face這樣的一個共同樣式里面。正面的圖片有一個單獨的樣式，將它放在front這樣的一個樣式里面來引用；背面的文字也有一個單獨的樣式，將它放在back里面來引用。這就是當前的父容器的結構。我們再設置一下容器里面圖片和文字的內容，其中圖片采用相對路徑進行添加。
我們簡單的設置一下CSS樣式部分：首先將默認樣式清零，設置頁面的背景顏色為深藍色，直接在body標簽里面進行設置。
當前的基本結構和樣式就已經設置完了，讓我們看一下代碼是如何編寫的。
下面就是代碼部分：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{ 8 padding: 0; 9 margin: 0; 10 } 11 body{ 12 background-color:#0D3462; 13 } 14 15 </style> 16 </head> 17 <body> 18 <div id="piclist"> 19 <div class="picbox"> 20 <div class="face front"><img src="images/1.jpg"></div> 21 <div class="face back"><h3>濃縮咖啡</h3></div> 22 </div> 23 <div class="picbox"> 24 <div class="face front"><img src="images/2.jpg"></div> 25 <div class="face back"><h3>卡布奇諾</h3></div> 26 </div> 27 <div class="picbox"> 28 <div class="face front"><img src="images/3.jpg"></div> 29 <div class="face back"><h3>拿鐵</h3></div> 30 </div> 31 <div class="picbox"> 32 <div class="face front"><img src="images/4.jpg"></div> 33 <div class="face back"><h3>摩卡</h3></div> 34 </div> 35 </div> 36 </body> 37 </html>
效果圖如下：
㈡CSS樣式設置后展開的效果
在上面的基礎上將樣式細化一下。首先設置舞台的樣式：設置舞台的高度，寬度，也就是舞台的大小，這個數字是根據里面元素的大小設定的。設置舞台的位置：垂直方向距離上邊距有100px的距離，水平方向居中顯示。設置四個父容器的樣式：四個父容器作為一個盒子，排列為一行，設置它們的浮動為向左浮動，再設置它們的高度，寬度，外邊距，最重要的是由於父元素它需要里面包含需要變換的內容，設置3D變換（編輯器里面采用trsf擴展生成），將它的值設置為preserve-3d，這種變換不是一下子就變換過來的，而是漸進的變換，設置transition，讓它在1.5s內完成變換，這是對於父容器的初步設定。
設置在父容器里面鼠標懸停在上面的時候來進行的3D變換：沿着Y軸翻轉180度。父容器里面兩個需要變換的元素，它們共同的效果就像撲克牌的兩面一樣。那么來設置face的樣式：先設置高和寬，進一步設置正面放置圖片的這一面的樣式，設置它的邊框為2個像素實線，為了配合咖啡的顏色，設置邊框顏色為棕色，再設置背面的樣式，設置它的背景顏色是咖啡色，邊框為2個像素，實線，白色來顯示，背面的文字用白色顯示，文本內容水平居中。
下面是CSS樣式設置后的代碼：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{ 8 padding: 0; 9 margin: 0; 10 } 11 body{ 12 background-color:#0D3462; 13 } 14 /*舞台*/ 15 #piclist{ 16 width:760px; /*170*4+10*8*/ 17 height: 220px;/*190+邊框*/ 18 margin: 100px auto; 19 } 20 /*容器*/ 21 .picbox{ 22 float: left; 23 /*position: relative;*/ 24 width: 170px; 25 height: 190px; 26 margin: 10px; 27 /*3d——雙面效果*/ 28 transform-style:preserve-3d; 29 transition:1.5s; 30 } 31 /*舞台鼠標懸停，就翻轉， 32 正面背面互換*/ 33 .picbox:hover{ 34 transform:rotateY(180deg); 35 } 36 .face{ 37 /*position: absolute;*/ 38 width:170px; 39 height:190px; 40 } 41 .front{ 42 border:2px solid #4b2518; 43 } 44 .back{ 45 /*讓它成為背面，開始只顯示正面*/ 46 /*transform:rotateY(180deg); */ 47 background-color: #4b2518; 48 border:2px solid #fff; 49 } 50 .back h3{ 51 color:white; 52 text-align:center; 53 } 54 </style> 55 </head> 56 <body> 57 <div id="container"> 58 <div id="piclist"> 59 <div class="picbox"> 60 <div class="face front"><img src="images/1.jpg"></div> 61 <div class="face back"><h3>濃縮咖啡</h3></div> 62 </div> 63 <div class="picbox"> 64 <div class="face front"><img src="images/2.jpg"></div> 65 <div class="face back"><h3>卡布奇諾</h3></div> 66 </div> 67 <div class="picbox"> 68 <div class="face front"><img src="images/3.jpg"></div> 69 <div class="face back"><h3>拿鐵</h3></div> 70 </div> 71 <div class="picbox"> 72 <div class="face front"><img src="images/4.jpg"></div> 73 <div class="face back"><h3>摩卡</h3></div> 74 </div> 75 </div> 76 </div> 77 </body> 78 </html>
效果圖如下：
★ 當前的圖片和文字已經設置好，而且鼠標懸停在上面也有漸進翻轉的效果，但是有兩個問題：
⑴圖片和文字的關系沒有形成正反面的關系；
⑵當鼠標懸停在上面的時候，會發現背面的文字已經被翻轉過來，相當於反着寫的字。
★我們最后要實現的效果是當前沒有翻轉的效果，那么如何做到這一點呢？
將背面的文字初始狀態下就先翻轉一下，當鼠標停留在上面的時候，它又被翻轉回來，那么就形成正常字序的文字了。
㈢完整效果代碼
設置層定位。需要在父元素，也就是父容器里面設置它的層定位的方式，將父元素設置成相對定位，子元素無論是正面還是背面，它都應該是一個絕對定位，再將背面設置成初始狀態就是翻轉的，那么讓初始狀態下翻轉180度。
完整的代碼如下面所示:
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>Document</title> 6 <style> 7 *{ 8 padding: 0; 9 margin: 0; 10 } 11 body{ 12 background-color:#0D3462; 13 } 14 /*舞台*/ 15 #piclist{ 16 width:760px; /*170*4+10*8*/ 17 height: 220px;/*190+邊框*/ 18 margin: 100px auto; 19 } 20 /*容器*/ 21 .picbox{ 22 float: left; 23 position: relative; 24 width: 170px; 25 height: 190px; 26 margin: 10px; 27 /*3d——雙面效果*/ 28 transform-style:preserve-3d; 29 transition:1.5s; 30 } 31 /*舞台鼠標懸停，就翻轉， 32 正面背面互換*/ 33 .picbox:hover{ 34 transform:rotateY(180deg); 35 } 36 .face{ 37 position: absolute; 38 width:170px; 39 height:190px; 40 } 41 .front{ 42 border:2px solid #4b2518; 43 } 44 .back{ 45 /*讓它成為背面，開始只顯示正面*/ 46 transform:rotateY(180deg); 47 background-color: #4b2518; 48 border:2px solid #fff; 49 } 50 .back h3{ 51 color:white; 52 text-align:center; 53 } 54 </style> 55 </head> 56 <body> 57 <div id="container"> 58 <div id="piclist"> 59 <div class="picbox"> 60 <div class="face front"><img src="images/1.jpg"></div> 61 <div class="face back"><h3>濃縮咖啡</h3></div> 62 </div> 63 <div class="picbox"> 64 <div class="face front"><img src="images/2.jpg"></div> 65 <div class="face back"><h3>卡布奇諾</h3></div> 66 </div> 67 <div class="picbox"> 68 <div class="face front"><img src="images/3.jpg"></div> 69 <div class="face back"><h3>拿鐵</h3></div> 70 </div> 71 <div class="picbox"> 72 <div class="face front"><img src="images/4.jpg"></div> 73 <div class="face back"><h3>摩卡</h3></div> 74 </div> 75 </div> 76 </div> 77 </body> 78 </html>
效果圖如下：
由於用了層定位，那么父元素是相對定位，兩個子元素都是相對於父元素的一個絕對定位，所以意味着兩個子元素原有文檔流的位置丟失，那么它們就會層疊在一起，而且初始狀態下，我們就已經將文字翻轉180度，那么光標停留在上面的時候，它又被翻轉回來，就形成了最終的效果。
以上就是css3中3D變換的示例——鼠標懸停在圖片上翻轉背面的文字說明的全部代碼和效果圖。希望有所幫助。