纯CSS实现3D图像轮转

CSS演武场今天继续，今天看一个纯css实现的3D图像轮转效果，请大家猛戳研究效果先，也可下载收藏先。

首先看html文件，div.billboard为效果的容器，利用10个div.poster分割图像，每个poster中有三个face，分别用来承载三个图像。

 <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文件这里我们用到了sass，用的是scss语法。

 //变量初始化
 //图像分块个数，如要更改，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;}
 }

使用sass可以使得代码结构清晰，逻辑性强，请大家研读提升！