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

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

XML/HTML Code复制内容到剪贴板 <divclass="billboard"> <divclass="poster"> <divclass="facepanel1p1"></div> <divclass="facepanel2p1"></div> <divclass="facepanel3p1"></div> </div> <divclass="poster"> <divclass="facepanel1p2"></div> <divclass="facepanel2p2"></div> <divclass="facepanel3p2"></div> </div> <divclass="poster"> <divclass="facepanel1p3"></div> <divclass="facepanel2p3"></div> <divclass="facepanel3p3"></div> </div> <divclass="poster"> <divclass="facepanel1p4"></div> <divclass="facepanel2p4"></div> <divclass="facepanel3p4"></div> </div> <divclass="poster"> <divclass="facepanel1p5"></div> <divclass="facepanel2p5"></div> <divclass="facepanel3p5"></div> </div> <divclass="poster"> <divclass="facepanel1p6"></div> <divclass="facepanel2p6"></div> <divclass="facepanel3p6"></div> </div> <divclass="poster"> <divclass="facepanel1p7"></div> <divclass="facepanel2p7"></div> <divclass="facepanel3p7"></div> </div> <divclass="poster"> <divclass="facepanel1p8"></div> <divclass="facepanel2p8"></div> <divclass="facepanel3p8"></div> </div> <divclass="poster"> <divclass="facepanel1p9"></div> <divclass="facepanel2p9"></div> <divclass="facepanel3p9"></div> </div> <divclass="poster"> <divclass="facepanel1p10"></div> <divclass="facepanel2p10"></div> <divclass="facepanel3p10"></div> </div> </div>

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

CSS Code复制内容到剪贴板 //变量初始化 //图像分块个数，如要更改，html需要进行相应的修改 $numPoster:10; //轮换图像个数，如要更改，html需要进行相应的修改 $numFace:3; //图像宽度 $width:600px; //图像高度 $height:320px; //盒子的设置 .billboard{ width:$width; margin:100pxauto; } //图像条左浮动 .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$ifrom1through$numFace{ .poster.panel#{$i}{ background:url(http://gx.zptc.cn/whqet/img/#{$i}.jpg); transform:transformY(360deg/$numFace*($i-1)); animation:rotateMe#{$i}10sinfinite; } @keyframesrotateMe#{$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$ifrom1through$numPoster{ .poster.p#{$i}{background-position:-($width/$numPoster*($i-1))top;} }

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

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

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