實現圖片翻轉，首先來分析一下我們希望實現的是怎樣的翻轉效果？又該如何去實現呢？
一、希望實現的效果
頁面上的圖片在光標懸停在上面的時候會發生翻轉效果，翻轉過后顯示出背面的說明文字。
鼠標沒有懸停在上面的效果
鼠標懸停在其中一張圖片上的效果：
二、實現方法
每幅圖片的翻轉效果都是沿着Y軸進行反轉的，可以是用3D變換來實現這種效果。下面來具體分析實現的各個步驟。
HTML結構部分：
1、首先將變換圖片和文字放在一個父容器中，因為設置了五張圖片所以需要五個父容器。這五個父容器又被放置在一個div（舞台）內進行變換。
2、在每個父容器里面有包含兩個部分：(1) 正面顯示的圖片(2)背面的說明文字
3、最后采用層定位，讓圖片和文字部分出現疊加的效果，經過3D變換后面的文字就會被顯示出來。
CSS樣式部分：
1、首先默認樣式清零，規定圖片（img）的寬高，為主體部分（body）設置背景顏色（這里的是#7a4390）
2、為最外面的"舞台"（.piclist），設置寬高和位置（垂直方向200px，水平方向上居中）。
3、設置父容器樣式（.picbox），浮動定位排列一行，寬高和外邊距，由於父元素里面包含需要變換的內容，要為其定義3D變換（transform-style:preseve-3d）,變換完成時間1.5s；設置層定位的方式 相對定位
鼠標懸停在父容器上時發生繞Y軸的180°旋轉
4、設置父容器里的內容（.box）圖片和文字共同的效果，寬高。內容絕對定位
內容是絕對定位父元素相對定位，脫離文檔流定位，失去原有的位置，從而發生堆疊效果
5、正面圖片的樣式（.front）邊框、為了美觀加入邊框陰影。
6、背面文字樣式（.back）背景顏色、邊框、文字樣式。設置初始狀態下就翻轉180°
下面是實現代碼
HTML部分
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>圖片翻轉</title> 6 <link rel="stylesheet" href="圖片翻轉.css"> 7 </head> 8 <body> 9 <div class="piclist"> 10 <div class="picbox"> 11 <div class="box front"><img src="wf1.jpg" alt=""></div> 12 <div class="box back"><h2>炫酷方塊</h2></div> 13 </div> 14 <div class="picbox"> 15 <div class="box front"><img src="wf2.jpg" alt=""></div> 16 <div class="box back"><h2>炫酷方塊</h2></div> 17 </div> 18 <div class="picbox"> 19 <div class="box front"><img src="wf4.jpg" alt=""></div> 20 <div class="box back"><h2>炫酷方塊</h2></div> 21 </div> 22 <div class="picbox"> 23 <div class="box front"><img src="wf5.jpg" alt=""></div> 24 <div class="box back"><h2>炫酷方塊</h2></div> 25 </div> 26 <div class="picbox"> 27 <div class="box front"><img src="wf6.jpg" alt=""></div> 28 <div class="box back"><h2>炫酷方塊</h2></div> 29 </div> 30 </div> 31 </body> 32 </html>
CSS部分
1 *{ 2 margin:0; 3 padding:0; 4 } 5 body{ 6 background: #7a4390; 7 } 8 img{ 9 width:200px; 10 height:200px; 11 } 12 .piclist{ 13 width:1200px; 14 height:400px; 15 margin:200px auto; 16 } 17 .picbox{ 18 float:left; 19 width:200px; 20 height:200px; 21 margin:auto; 22 margin:10px; 23 position:relative; 24 /*父元素里面包含需要變換的內容，所以設置為3D變換*/ 25 -webkit-transform-style: preserve-3d; 26 -moz-transform-style: preserve-3d; 27 -ms-transform-style: preserve-3d; 28 transform-style: preserve-3d; 29 transition:1.5s; 30 /*設置在1.5s內完成變換*/ 31 } 32 .picbox:hover{ 33 transform:rotateY(180deg); 34 } 35 .box{ 36 width:200px; 37 height:200px; 38 position:absolute 39 } 40 .front{ 41 border:2px solid #ddd; 42 box-shadow:10px 10px 10px #aaa; 43 } 44 .back{ 45 -webkit-transform: rotateY(180deg); 46 -ms-transform: rotateY(180deg); 47 -o-transform: rotateY(180deg); 48 transform: rotateY(180deg); 49 background: #8b4373; 50 border:2px solid #ddd; 51 } 52 .back h2{ 53 color: white; 54 text-align: center; 55 }
希望有所幫助~