纯CSS实现3D图像轮转

8/31/2015来源:CSS教程人气:959

CSS实现3D图像轮转

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

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

  1. <divclass="billboard">
  2. <divclass="poster">
  3. <divclass="facepanel1p1"></div>
  4. <divclass="facepanel2p1"></div>
  5. <divclass="facepanel3p1"></div>
  6. </div>
  7. <divclass="poster">
  8. <divclass="facepanel1p2"></div>
  9. <divclass="facepanel2p2"></div>
  10. <divclass="facepanel3p2"></div>
  11. </div>
  12. <divclass="poster">
  13. <divclass="facepanel1p3"></div>
  14. <divclass="facepanel2p3"></div>
  15. <divclass="facepanel3p3"></div>
  16. </div>
  17. <divclass="poster">
  18. <divclass="facepanel1p4"></div>
  19. <divclass="facepanel2p4"></div>
  20. <divclass="facepanel3p4"></div>
  21. </div>
  22. <divclass="poster">
  23. <divclass="facepanel1p5"></div>
  24. <divclass="facepanel2p5"></div>
  25. <divclass="facepanel3p5"></div>
  26. </div>
  27. <divclass="poster">
  28. <divclass="facepanel1p6"></div>
  29. <divclass="facepanel2p6"></div>
  30. <divclass="facepanel3p6"></div>
  31. </div>
  32. <divclass="poster">
  33. <divclass="facepanel1p7"></div>
  34. <divclass="facepanel2p7"></div>
  35. <divclass="facepanel3p7"></div>
  36. </div>
  37. <divclass="poster">
  38. <divclass="facepanel1p8"></div>
  39. <divclass="facepanel2p8"></div>
  40. <divclass="facepanel3p8"></div>
  41. </div>
  42. <divclass="poster">
  43. <divclass="facepanel1p9"></div>
  44. <divclass="facepanel2p9"></div>
  45. <divclass="facepanel3p9"></div>
  46. </div>
  47. <divclass="poster">
  48. <divclass="facepanel1p10"></div>
  49. <divclass="facepanel2p10"></div>
  50. <divclass="facepanel3p10"></div>
  51. </div>
  52. </div>

CSS文件这里我们用到了sass,用的是scss语法。

  1. //变量初始化
  2. //图像分块个数,如要更改,html需要进行相应的修改
  3. $numPoster:10;
  4. //轮换图像个数,如要更改,html需要进行相应的修改
  5. $numFace:3;
  6. //图像宽度
  7. $width:600px;
  8. //图像高度
  9. $height:320px;
  10. //盒子的设置
  11. .billboard{
  12. width:$width;
  13. margin:100pxauto;
  14. }
  15. //图像条左浮动
  16. .poster{
  17. float:left;
  18. width:$width/$numPoster;
  19. height:$height;
  20. }
  21. //图像条面的统一设置,绝对定位、3d动画设置
  22. .face{
  23. position:absolute;
  24. height:$height;
  25. width:$width/$numPoster;
  26. transform-origin:50%50%-17px;
  27. backface-visibility:hidden;
  28. transform-style:PReserve-3d;
  29. perspective:350px;
  30. }
  31. //图像条面分别设置背景图像、动画
  32. @for$ifrom1through$numFace{
  33. .poster.panel#{$i}{
  34. background:url(http://gx.zptc.cn/whqet/img/#{$i}.jpg);
  35. transform:transformY(360deg/$numFace*($i-1));
  36. animation:rotateMe#{$i}10sinfinite;
  37. }
  38. @keyframesrotateMe#{$i}{
  39. 0%{
  40. transform:rotateY(360deg/$numFace*($i-1));
  41. }
  42. 9%{
  43. transform:rotateY(360deg/$numFace*($i-1));
  44. }
  45. 24%{
  46. transform:rotateY(360deg/$numFace*($i));
  47. }
  48. 42%{
  49. transform:rotateY(360deg/$numFace*($i));
  50. }
  51. 57%{
  52. transform:rotateY(360deg/$numFace*($i+1));
  53. }
  54. 75%{
  55. transform:rotateY(360deg/$numFace*($i+1));
  56. }
  57. 90%{
  58. transform:rotateY(360deg/$numFace*($i+2));
  59. }
  60. 100%{
  61. transform:rotateY(360deg/$numFace*($i+2));
  62. }
  63. }
  64. }
  65. //图像条面的背景偏移
  66. @for$ifrom1through$numPoster{
  67. .poster.p#{$i}{background-position:-($width/$numPoster*($i-1))top;}
  68. }

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