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

本文实例为大家分享了纯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>

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

//变量初始化      

    //图像分块个数，如要更改，html需要进行相应的修改      

    $numPoster:10;       

          

    //轮换图像个数，如要更改，html需要进行相应的修改      

    $numFace:3;       

          

    //图像宽度       

    $width:600px;       

          

    //图像高度       

    $height:320px;       

          

    //盒子的设置      

    .billboard {        

        width:$width;        

        margin:100px auto;        

    }       

          

    //图像条左浮动       

    .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 $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;}        

    }

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

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

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