本文实例为大家分享了纯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可以使得代码结构清晰，逻辑性强，请大家研读提升。

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

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