纯CSS实现3D图像轮转

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

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

<div class="billboard">
    <div class="poster">
        <div class="face panel1 p1"></div>
        <div class="face panel2 p1"></div>
        <div class="face panel3 p1"></div>
    </div>
    <div class="poster">
        <div class="face panel1 p2"></div>
        <div class="face panel2 p2"></div>
        <div class="face panel3 p2"></div>
    </div>
    <div class="poster">
        <div class="face panel1 p3"></div>
        <div class="face panel2 p3"></div>
        <div class="face panel3 p3"></div>
    </div>
    <div class="poster">
        <div class="face panel1 p4"></div>
        <div class="face panel2 p4"></div>
        <div class="face panel3 p4"></div>
    </div>
    <div class="poster">
        <div class="face panel1 p5"></div>
        <div class="face panel2 p5"></div>
        <div class="face panel3 p5"></div>
    </div>
    <div class="poster">
        <div class="face panel1 p6"></div>
        <div class="face panel2 p6"></div>
        <div class="face panel3 p6"></div>
    </div>
    <div class="poster">
        <div class="face panel1 p7"></div>
        <div class="face panel2 p7"></div>
        <div class="face panel3 p7"></div>
    </div>
    <div class="poster">
        <div class="face panel1 p8"></div>
        <div class="face panel2 p8"></div>
        <div class="face panel3 p8"></div>
    </div>
    <div class="poster">
        <div class="face panel1 p9"></div>
        <div class="face panel2 p9"></div>
        <div class="face panel3 p9"></div>
    </div>
    <div class="poster">
        <div class="face panel1 p10"></div>
        <div class="face panel2 p10"></div>
        <div class="face panel3 p10"></div>
    </div>
</div>

$numPoster:10;
$numFace:3;
$width:600px;
$height:320px;
.billboard {
    width:$width;
    margin:100px auto;
}
.poster {
    float:left;
    width:$width/$numPoster;
    height:$height;
}
.face {
    position:absolute;
    height:$height;
    width:$width/$numPoster;
    transform-origin:50% 50% -17px;
    backface-visibility: hidden;
    transform-style:preserve-3d;
    perspective:350px;
}

@for $i from 1 through $numFace{
  .poster .panel#{$i} {
    background:url(http://gx.zptc.cn/whqet/img/#{$i}.jpg);
    transform:transformY(360deg/$numFace*($i - 1));
    animation: rotateMe#{$i} 10s infinite;
  }
  @keyframes rotateMe#{$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 $i from 1 through $numPoster {
  .poster .p#{$i} {background-position:-($width/$numPoster*($i - 1)) top;}
}

前端开发whqet，关注web前端开发技术，分享网页相关资源。
---------------------------------------------------------------

纯CSS实现3D图像轮转,古老的榕树,5-wow.com