纯CSS实现3D图像轮转

CSS演武场今天继续，今天看一个纯css实现的3D图像轮转效果，请大家猛戳研究效果先，也可下载收藏先。

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

[html] view
plaincopy

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

1. //变量初始化
2. //图像分块个数，如要更改，html需要进行相应的修改
3. $numPoster:10;
4. //轮换图像个数，如要更改，html需要进行相应的修改
5. $numFace:3;
6. //图像宽度
7. $width:600px;
8. //图像高度
9. $height:320px;
10. //盒子的设置
11. .billboard {
12. width:$width;
13. margin:100px auto;
14. }
15. //图像条左浮动
16. .poster {
17. float:left;
18. width:$width/$numPoster;
19. height:$height;
20. }
21. //图像条面的统一设置，绝对定位、3d动画设置
22. .face {
23. position:absolute;
24. height:$height;
25. width:$width/$numPoster;
26. transform-origin:50% 50% -17px;
27. backface-visibility: hidden;
28. transform-style:preserve-3d;
29. perspective:350px;
30. }
31. //图像条面分别设置背景图像、动画
32. @for $i from 1 through $numFace{
33. .poster .panel#{$i} {
34. background:url(http://gx.zptc.cn/whqet/img/#{$i}.jpg);
35. transform:transformY(360deg/$numFace*($i - 1));
36. animation: rotateMe#{$i} 10s infinite;
37. }
38. @keyframes rotateMe#{$i} {
39. 0% {
40. transform:rotateY(360deg/$numFace*($i - 1));
41. }
42. 9% {
43. transform:rotateY(360deg/$numFace*($i - 1));
44. }
45. 24% {
46. transform:rotateY(360deg/$numFace*($i));
47. }
48. 42% {
49. transform:rotateY(360deg/$numFace*($i));
50. }
51. 57% {
52. transform:rotateY(360deg/$numFace*($i + 1));
53. }
54. 75% {
55. transform:rotateY(360deg/$numFace*($i + 1));
56. }
57. 90% {
58. transform:rotateY(360deg/$numFace*($i + 2));
59. }
60. 100% {
61. transform:rotateY(360deg/$numFace*($i + 2));
62. }
63. }
64. }
65. //图像条面的背景偏移
66. @for $i from 1 through $numPoster {
67. .poster .p#{$i} {background-position:-($width/$numPoster*($i - 1)) top;}
68. }

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