纯css如何实现3D图像轮转效果

网络
也许你想成为太阳，可你却只是一颗星辰；也许你想成为大树，可你却是一棵小草。于是，你有些自卑。其实，你和别人一样，也是一片风景：做不了太阳，就做星辰，在自我的星座发光发热；做不了大树，就做小草，以自我的绿色装点期望……

本文实例为大家分享了纯css实现3D图像轮转效果的具体代码，供大家参考，具体内容如下

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

XML/HTML Code复制内容到剪贴板
  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语法。

CSS Code复制内容到剪贴板
  1. //变量初始化
  2. //图像分块个数，如要更改，html需要进行相应的修改
  3. $numPoster:10;
  5. //轮换图像个数，如要更改，html需要进行相应的修改
  6. $numFace:3;
  8. //图像宽度
  9. $width:600px;
  11. //图像高度
  12. $height:320px;
  14. //盒子的设置
  15. .billboard{
  16. width:$width;
  17. margin:100pxauto;
  18. }
  20. //图像条左浮动
  21. .poster{
  22. float:left;
  23. width:$width/$numPoster;
  24. height:$height;
  25. }
  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. }
  38. //图像条面分别设置背景图像、动画
  39. @for$ifrom1through$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}10sinfinite;
  44. }
  45. @keyframesrotateMe#{$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. }
  73. //图像条面的背景偏移
  74. @for$ifrom1through$numPoster{
  75. .poster.p#{$i}{background-position:-($width/$numPoster*($i-1))top;}
  76. }

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

以上就是本文的全部内容，希望对大家的学习有所帮助。

原文：http://www.cnblogs.com/shouce/p/5256638.html

您可能有感兴趣的文章
css让页脚保持在底部位置的四种方案
CSS如何使用Flex和Grid布局如何实现3D骰子
Flex布局史上最简单使用语法教程
新的CSS 伪类函数 :is() 和 :where()示例详解
纯CSS打字动画的如何实现示例