首页 > 代码库 > 纯CSS实现3D图像轮转
纯CSS实现3D图像轮转
CSS演武场今天继续,今天看一个纯css实现的3D图像轮转效果,请大家猛戳研究效果先,也可下载收藏先。
首先看html文件,div.billboard为效果的容器,利用10个div.poster分割图像,每个poster中有三个face,分别用来承载三个图像。
[html] view plaincopy
- <div class="billboard">
- <div class="poster">
- <div class="face panel1 p1"></div>
- <div class="face panel2 p1"></div>
- <div class="face panel3 p1"></div>
- </div>
- <div class="poster">
- <div class="face panel1 p2"></div>
- <div class="face panel2 p2"></div>
- <div class="face panel3 p2"></div>
- </div>
- <div class="poster">
- <div class="face panel1 p3"></div>
- <div class="face panel2 p3"></div>
- <div class="face panel3 p3"></div>
- </div>
- <div class="poster">
- <div class="face panel1 p4"></div>
- <div class="face panel2 p4"></div>
- <div class="face panel3 p4"></div>
- </div>
- <div class="poster">
- <div class="face panel1 p5"></div>
- <div class="face panel2 p5"></div>
- <div class="face panel3 p5"></div>
- </div>
- <div class="poster">
- <div class="face panel1 p6"></div>
- <div class="face panel2 p6"></div>
- <div class="face panel3 p6"></div>
- </div>
- <div class="poster">
- <div class="face panel1 p7"></div>
- <div class="face panel2 p7"></div>
- <div class="face panel3 p7"></div>
- </div>
- <div class="poster">
- <div class="face panel1 p8"></div>
- <div class="face panel2 p8"></div>
- <div class="face panel3 p8"></div>
- </div>
- <div class="poster">
- <div class="face panel1 p9"></div>
- <div class="face panel2 p9"></div>
- <div class="face panel3 p9"></div>
- </div>
- <div class="poster">
- <div class="face panel1 p10"></div>
- <div class="face panel2 p10"></div>
- <div class="face panel3 p10"></div>
- </div>
- </div>
[css] view plaincopy
- //变量初始化
- //图像分块个数,如要更改,html需要进行相应的修改
- $numPoster:10;
- //轮换图像个数,如要更改,html需要进行相应的修改
- $numFace:3;
- //图像宽度
- $width:600px;
- //图像高度
- $height:320px;
- //盒子的设置
- .billboard {
- width:$width;
- margin:100px auto;
- }
- //图像条左浮动
- .poster {
- float:left;
- width:$width/$numPoster;
- height:$height;
- }
- //图像条面的统一设置,绝对定位、3d动画设置
- .face {
- position:absolute;
- height:$height;
- width:$width/$numPoster;
- transform-origin:50% 50% -17px;
- backface-visibility: hidden;
- transform-style:preserve-3d;
- perspective:350px;
- }
- //图像条面分别设置背景图像、动画
- @for $i from 1 through $numFace{
- .poster .panel#{$i} {
- background:url(http://gx.zptc.cn/whqet/img/#{$i}.jpg);
- transform:transformY(360deg/$numFace*($i - 1));
- animation: rotateMe#{$i} 10s infinite;
- }
- @keyframes rotateMe#{$i} {
- 0% {
- transform:rotateY(360deg/$numFace*($i - 1));
- }
- 9% {
- transform:rotateY(360deg/$numFace*($i - 1));
- }
- 24% {
- transform:rotateY(360deg/$numFace*($i));
- }
- 42% {
- transform:rotateY(360deg/$numFace*($i));
- }
- 57% {
- transform:rotateY(360deg/$numFace*($i + 1));
- }
- 75% {
- transform:rotateY(360deg/$numFace*($i + 1));
- }
- 90% {
- transform:rotateY(360deg/$numFace*($i + 2));
- }
- 100% {
- transform:rotateY(360deg/$numFace*($i + 2));
- }
- }
- }
- //图像条面的背景偏移
- @for $i from 1 through $numPoster {
- .poster .p#{$i} {background-position:-($width/$numPoster*($i - 1)) top;}
- }
纯CSS实现3D图像轮转
声明:以上内容来自用户投稿及互联网公开渠道收集整理发布,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任,若内容有误或涉及侵权可进行投诉: 投诉/举报 工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。