纯CSS实现3D图像轮转
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语法。
1.//变量初始化
2.//图像分块个数,如要更改,html需要进行相应的修改
3.$numPoster:10;
4.
5.//轮换图像个数,如要更改,html需要进行相应的修改
6.$numFace:3;
7.
8.//图像宽度
9.$width:600px;
10.
11.//图像高度
12.$height:320px;
13.
14.//盒子的设置
15..billboard {
16. width:$width;
17. margin:100px auto;
18.}
19.
20.//图像条左浮动
21..poster {
22. float:left;
23. width:$width/$numPoster;
24. height:$height;
25.}
26.
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.}
37.
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.}
72.
73.//图像条面的背景偏移
74.@for $i from 1 through $numPoster {
75. .poster .p#{$i} {background-position:-($width/$numPoster*($i - 1)) top;}
76.}
使用sass可以使得代码结构清晰,逻辑性强,请大家研读提升!
【纯CSS实现3D图像轮转】相关文章
1. 纯CSS实现3D图像轮转
4. 纯css3 transforms 3D文字翻开翻转3D开放式效果
5. HTML5组件Canvas实现图像灰度化(步骤+实例效果)
6. 基于Threejs的jQuery 3d图片旋转木马特效插件
7. Opera Mini 7发布Android版,支持HTML5和3D图形
10. 纯HTML+CSS实现阿童木头像
本文来源:https://www.51html5.com/a994.html
﹝纯CSS实现3D图像轮转﹞相关内容
- Chrome 18 将提升HTML5的2D图形性能
- CSS3实现超酷的图像动画变换特效
- 用纯CSS3实现图片幻灯片切换效果
- 纯CSS3实现圆角按钮
- 效果非常酷!纯CSS3实现的图片滑块程序
- 超可爱 纯CSS3实现的小猪、小老鼠、小牛
- 纯CSS3实现的顶部社会化分享按钮
- 7款纯CSS3实现的炫酷动画应用
- 一款纯css3实现的颜色渐变按钮
- 基于html5 canvas和js实现的水果忍者网页版