纯css实现3D图像轮转效果
41 浏览量
2020-09-24
22:46:07
上传
评论
收藏 47KB PDF 举报
纯纯css实现实现3D图像轮转效果图像轮转效果
主要为大家详细介绍了纯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复制内容到剪贴板
评论0
最新资源