纯CSS实现3D图像轮转

2021-08-07 06:28:10

CSS演武场今天继续，今天看一个纯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图像轮转,布布扣,bubuko.com

纯CSS实现3D图像轮转

上一篇：Aspose.Slides For .Net v19.6有哪些功能亮点？我们用示例说话


下一篇：JAVA多线程--Thread(4)