[html] view plaincopy[img]http://blog.csdn.net/zou128865/article/details/42417315/https:/code.csdn.net/assets/CODE_ico.png[img]http://blog.csdn.net/zou128865/article/details/42417315/https:/code.csdn.net/assets/ico_fork.svg
CSS演武場今天持續(xù)，今天看一個純css實現(xiàn)的3D圖像輪轉(zhuǎn)效不雅，請大年夜家猛戳研究效不雅先，也可下載收藏先。
起首看html文件，div.billboard為效不雅的容器，應用10個div.poster瓜分圖像，每個poster中有三個face，分別用來承載三個圖像。

1. <div class="billboard">  
2.     <div class="poster">  
3.         <div class="face panel1 p1"></div>  
4.         <div class="face panel2 p1"></div>  
5.         <div class="face panel3 p1"></div>  
6.     </div>  
7.     <div class="poster">  
8.         <div class="face panel1 p2"></div>  
9.         <div class="face panel2 p2"></div>  
10.         <div class="face panel3 p2"></div>  
11.     </div>  
12.     <div class="poster">  
13.         <div class="face panel1 p3"></div>  
14.         <div class="face panel2 p3"></div>  
15.         <div class="face panel3 p3"></div>  
16.     </div>  
17.     <div class="poster">  
18.         <div class="face panel1 p4"></div>  
19.         <div class="face panel2 p4"></div>  
20.         <div class="face panel3 p4"></div>  
21.     </div>  
22.     <div class="poster">  
23.         <div class="face panel1 p5"></div>  
24.         <div class="face panel2 p5"></div>  
25.         <div class="face panel3 p5"></div>  
26.     </div>  
27.     <div class="poster">  
28.         <div class="face panel1 p6"></div>  
29.         <div class="face panel2 p6"></div>  
30.         <div class="face panel3 p6"></div>  
31.     </div>  
32.     <div class="poster">  
33.         <div class="face panel1 p7"></div>  
34.         <div class="face panel2 p7"></div>  
35.         <div class="face panel3 p7"></div>  
36.     </div>  
37.     <div class="poster">  
38.         <div class="face panel1 p8"></div>  
39.         <div class="face panel2 p8"></div>  
40.         <div class="face panel3 p8"></div>  
41.     </div>  
42.     <div class="poster">  
43.         <div class="face panel1 p9"></div>  
44.         <div class="face panel2 p9"></div>  
45.         <div class="face panel3 p9"></div>  
46.     </div>  
47.     <div class="poster">  
48.         <div class="face panel1 p10"></div>  
49.         <div class="face panel2 p10"></div>  
50.         <div class="face panel3 p10"></div>  
51.     </div>  
52. </div>  

CSS文件這里我們用到了sass，用的是scss語法。
[css] view plaincopy[img]http://blog.csdn.net/zou128865/article/details/42417315/https:/code.csdn.net/assets/CODE_ico.png[img]http://blog.csdn.net/zou128865/article/details/42417315/https:/code.csdn.net/assets/ico_fork.svg
應用sass可以使得代碼構(gòu)造清楚，邏輯性強，請大年夜家研讀晉升！

1. //變量初始化  
2. //圖像分塊個數(shù)，如要更改，html須要進行響應的修改  
3. $numPoster:10;   
4.   
5. //輪換圖像個數(shù)，如要更改，html須要進行響應的修改  
6. $numFace:3;   
7.   
8. //圖像寬度   
9. $width:600px;   
10.   
11. //圖像高度   
12. $height:320px;   
13.   
14. //盒子的設置  
15. .billboard {    
16.     width:$width;    
17.     margin:100px auto;    
18. }   
19.   
20. //圖像便條浮動   
21. .poster {    
22.     float:left;    
23.     width:$width/$numPoster;    
24.     height:$height;    
25. }  
26.   
27. //圖像條面的同一設置，絕對定位、3d動畫設置    
28. .face {    
29.     position:absolute;    
30.     height:$height;    
31.     width:$width/$numPoster;    
32.     transform-origin:50% 50% -17px;    
33.     backface-visibility: hidden;    
34.     transform-style:preserve-3d;    
35.     perspective:350px;    
36. }    
37.   
38. //圖像條面分別設置背景圖像、動畫  
39. @for $i from 1 through $numFace{    
40.   .poster .panel#{$i} {    
41.     background:url(http://gx.zptc.cn/whqet/img/#{$i}.jpg);    
42.     transform:transformY(360deg/$numFace*($i - 1));    
43.     animation: rotateMe#{$i} 10s infinite;    
44.   }    
45.   @keyframes rotateMe#{$i} {    
46.     0% {    
47.         transform:rotateY(360deg/$numFace*($i - 1));    
48.     }    
49.     9% {    
50.         transform:rotateY(360deg/$numFace*($i - 1));    
51.     }    
52.     24% {    
53.         transform:rotateY(360deg/$numFace*($i));    
54.     }    
55.     42% {    
56.         transform:rotateY(360deg/$numFace*($i));    
57.     }    
58.     57% {    
59.         transform:rotateY(360deg/$numFace*($i + 1));    
60.     }    
61.     75% {    
62.         transform:rotateY(360deg/$numFace*($i + 1));    
63.     }    
64.     90% {    
65.         transform:rotateY(360deg/$numFace*($i + 2));    
66.     }    
67.     100% {    
68.         transform:rotateY(360deg/$numFace*($i + 2));    
69.     }    
70.   }    
71. }   
72.   
73. //圖像條面的背景偏移  
74. @for $i from 1 through $numPoster {    
75.   .poster .p#{$i} {background-position:-($width/$numPoster*($i - 1)) top;}    
76. }