CSS3教程

当前位置: HTML5技术网 > CSS3教程 > 纯CSS实现3D图像轮转

纯CSS实现3D图像轮转

      今天看一个纯css实现的3D图像轮转效果,大家可以点击查看效果研究,  也可以先下载收藏。       首先看html文件,div.billboard为效果的容器,利用10个div.poster分割图像,每个poster中有三个face,分别用来承载三个图像。   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语法。

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图像轮转

2. 纯CSS实现的3D简洁按钮设计

3. 纯CSS实现Tooltip

4. 纯css3 transforms 3D文字翻开翻转3D开放式效果

5. HTML5组件Canvas实现图像灰度化(步骤+实例效果)

6. 基于Threejs的jQuery 3d图片旋转木马特效插件

7. Opera Mini 7发布Android版,支持HTML5和3D图形

8. 一款非常棒的纯CSS3 3D菜单演示及制作教程

9. CSS实现跨浏览器兼容性的盒阴影效果

10. 纯HTML+CSS实现阿童木头像

本文来源:https://www.51html5.com/a994.html

点击展开全部

﹝纯CSS实现3D图像轮转﹞相关内容

「纯CSS实现3D图像轮转」相关专题

其它栏目

也许您还喜欢