纯CSS实现3D图像轮转

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

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

1. <divclass="billboard">
2. <divclass="poster">
3. <divclass="facepanel1p1"></div>
4. <divclass="facepanel2p1"></div>
5. <divclass="facepanel3p1"></div>
6. </div>
7. <divclass="poster">
8. <divclass="facepanel1p2"></div>
9. <divclass="facepanel2p2"></div>
10. <divclass="facepanel3p2"></div>
11. </div>
12. <divclass="poster">
13. <divclass="facepanel1p3"></div>
14. <divclass="facepanel2p3"></div>
15. <divclass="facepanel3p3"></div>
16. </div>
17. <divclass="poster">
18. <divclass="facepanel1p4"></div>
19. <divclass="facepanel2p4"></div>
20. <divclass="facepanel3p4"></div>
21. </div>
22. <divclass="poster">
23. <divclass="facepanel1p5"></div>
24. <divclass="facepanel2p5"></div>
25. <divclass="facepanel3p5"></div>
26. </div>
27. <divclass="poster">
28. <divclass="facepanel1p6"></div>
29. <divclass="facepanel2p6"></div>
30. <divclass="facepanel3p6"></div>
31. </div>
32. <divclass="poster">
33. <divclass="facepanel1p7"></div>
34. <divclass="facepanel2p7"></div>
35. <divclass="facepanel3p7"></div>
36. </div>
37. <divclass="poster">
38. <divclass="facepanel1p8"></div>
39. <divclass="facepanel2p8"></div>
40. <divclass="facepanel3p8"></div>
41. </div>
42. <divclass="poster">
43. <divclass="facepanel1p9"></div>
44. <divclass="facepanel2p9"></div>
45. <divclass="facepanel3p9"></div>
46. </div>
47. <divclass="poster">
48. <divclass="facepanel1p10"></div>
49. <divclass="facepanel2p10"></div>
50. <divclass="facepanel3p10"></div>
51. </div>
52. </div>

CSS文件这里我们用到了sass，用的是scss语法。

1. //变量初始化
2. //图像分块个数，如要更改，html需要进行相应的修改
3. $numPoster:10;
5. //轮换图像个数，如要更改，html需要进行相应的修改
6. $numFace:3;
8. //图像宽度
9. $width:600px;
11. //图像高度
12. $height:320px;
14. //盒子的设置
15. .billboard{
16. width:$width;
17. margin:100pxauto;
18. }
20. //图像条左浮动
21. .poster{
22. float:left;
23. width:$width/$numPoster;
24. height:$height;
25. }
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. }
38. //图像条面分别设置背景图像、动画
39. @for$ifrom1through$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}10sinfinite;
44. }
45. @keyframesrotateMe#{$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. }
73. //图像条面的背景偏移
74. @for$ifrom1through$numPoster{
75. .poster.p#{$i}{background-position:-($width/$numPoster*($i-1))top;}
76. }

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