纯css实现3D图像轮转效果

前端  /  管理员 发布于 8年前   408

本文实例为大家分享了纯css实现3D图像轮转效果的具体代码，供大家参考，具体内容如下

首先看html文件，div.billboard为效果的容器，利用10个div.poster分割图像，每个poster中有三个face，分别用来承载三个图像。

XML/HTML Code复制内容到剪贴板

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 Code复制内容到剪贴板

1. //变量初始化     
2. //图像分块个数，如要更改，html需要进行相应的修改     
3. $numPoster:10;      
4.      
5. //轮换图像个数，如要更改，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. }       
77.   

使用sass可以使得代码结构清晰，逻辑性强，请大家研读提升。

以上就是本文的全部内容，希望对大家的学习有所帮助。

原文：http://www.cnblogs.com/shouce/p/5256638.html