先來看一下效果：http://39.105.101.122/myhtml/CSS/transform_3D/img_3D.html
目前沒有做IE的兼容，在谷歌瀏覽器里面可以看到效果
布局結構：
<div class="container"> <img src="../Img/1.jpg"> <img src="../Img/2.jpg"> <img src="../Img/3.jpg"> <img src="../Img/4.jpg"> <img src="../Img/5.jpg"> <img src="../Img/6.jpg"> <img src="../Img/7.jpg"> <img src="../Img/8.jpg"> <img src="../Img/9.jpg"> <img src="../Img/10.jpg"> </div>
CSS3中新增了translate-style和perspective屬性，要讓圖片有3D的效果就要添加這兩個屬性，具體的解釋這里不再贅述，可以看這篇文章來理解：http://www.zhangxinxu.com/wordpress/2012/09/css3-3d-transform-perspective-animate-transition/
給container添加translate-style為preserve-3d，添加perspective: 2000px;
這里一共10張圖片，為了讓10張圖片圍成一個圓，需要添加position屬性為absolute，設置寬度相同，居中，這時所有圖片都重合在了一起。每張圖片繞Y軸旋轉36*i（i:0->9）度（rotateY），然后每張圖片在Z軸方向移動相同的距離（translateZ），這個距離能保證圖片不重合在一起就行。這時圖片就圍成了一個環狀，並且是有3D效果的。然后給container添加動畫屬性讓其繞Y軸不停旋轉（rotateY），這時動畫就出現了。
注意：給圖片添加的屬性transform: rotateY(0deg) translateZ(350px);rotateY和translateZ的位置不能交換，因為先旋轉后移動和先移動后旋轉的效果是不一樣的。
這里我給container添加了背景顏色來參考圖片的相對位置和旋轉軸。
如果要用鼠標點擊來切換圖片的話，只需要每次點擊之后container的旋轉角度加36度就可以。
貼上代碼：
1 <!DOCTYPE html> 2 <html lang="en"> 3 <head> 4 <meta charset="UTF-8"> 5 <title>img_3D</title> 6 </head> 7 <style type="text/css"> 8 @keyframes an1{ 9 0%{ 10 transform: rotateY(0deg) ; 11 } 12 50%{ 13 transform: rotateY(180deg) ; 14 } 15 100%{ 16 transform: rotateY(360deg) ; 17 } 18 } 19 .container{ 20 width: 900px; 21 height: 400px; 22 background: rgba(255,0,0,0.5); 23 /*opacity: 0.3;*/ 24 25 margin: 200px auto; 26 perspective: 2000px; 27 transform-style: preserve-3d; 28 animation: an1 10s linear 0s infinite; 29 } 30 .container img{ 31 width: 200px; 32 height: auto; 33 margin: auto; 34 top: 0; 35 bottom: 0; 36 left: 0; 37 right: 0; 38 position: absolute; 39 } 40 .container img:nth-child(1){ 41 transform: rotateY(0deg) translateZ(350px); 42 } 43 .container img:nth-child(2){ 44 transform: rotateY(36deg) translateZ(350px); 45 } 46 .container img:nth-child(3){ 47 transform: rotateY(72deg) translateZ(350px); 48 } 49 .container img:nth-child(4){ 50 transform: rotateY(108deg) translateZ(350px); 51 } 52 .container img:nth-child(5){ 53 transform: rotateY(144deg) translateZ(350px); 54 } 55 .container img:nth-child(6){ 56 transform: rotateY(180deg) translateZ(350px); 57 } 58 .container img:nth-child(7){ 59 transform: rotateY(216deg) translateZ(350px); 60 } 61 .container img:nth-child(8){ 62 transform: rotateY(252deg) translateZ(350px); 63 } 64 .container img:nth-child(9){ 65 transform: rotateY(288deg) translateZ(350px); 66 } 67 .container img:nth-child(10){ 68 transform: rotateY(324deg) translateZ(350px); 69 } 70 </style> 71 <body> 72 <div class="container"> 73 <img src="../Img/1.jpg"> 74 <img src="../Img/2.jpg"> 75 <img src="../Img/3.jpg"> 76 <img src="../Img/4.jpg"> 77 <img src="../Img/5.jpg"> 78 <img src="../Img/6.jpg"> 79 <img src="../Img/7.jpg"> 80 <img src="../Img/8.jpg"> 81 <img src="../Img/9.jpg"> 82 <img src="../Img/10.jpg"> 83 </div> 84 </body> 85 </html>