纯CSS实现3D图像轮转CSS演武场今天继续，今天看一个纯css实现的3D图像轮转效果，请大家猛戳研究效果先，也可下载收藏先。
首先看html文件，div.billboard为效果的容器，利用10个div.poster分割图像，每个poster中有三个face，分别用来承载三个图像。
<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语法。
//变量初始化//图像分块个数，如要更改，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可以使得代码结构清晰，逻辑性强，请大家研读提升！