DIV CSS 佈局教程網

這篇文章主要為大家詳細介紹了純css實現3D圖像輪轉效果，CSS制作的3D圖像輪轉，具有一定的參考價值，感興趣的小伙伴們可以參考一下

本文實例為大家分享了純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;
5. //輪換圖像個數，如要更改，Html需要進行相應的修改
6. $numFace:3;
8. //圖像寬度
9. $width:600px;
11. //圖像高度
12. $height:320px;
14. //盒子的設置
15. .billboard {
16. width:$width;
17. margin:100px auto;
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 $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. }
73. //圖像條面的背景偏移
74. @for $i from 1 through $numPoster {
75. .poster .p#{$i} {background-position:-($width/$numPoster*($i - 1)) top;}
76. }

使用sass可以使得代碼結構清晰，邏輯性強，請大家研讀提升。

以上就是本文的全部內容，希望對大家的學習有所幫助。