纯CSS实现3D图像轮转

时间：2015-01-05 09:34:17 阅读：208 评论：0 收藏：0 [点我收藏+]

标签：

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

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

[html]view
 plaincopy

<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语法。

[css]view
 plaincopy

//变量初始化  

//图像分块个数，如要更改，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可以使得代码结构清晰，逻辑性强，请大家研读提升！

纯CSS实现3D图像轮转

标签：

原文地址：http://blog.csdn.net/zou128865/article/details/42417315

踩

(0)

评论一句话评论（0）

分享档案

更多>

2021年07月29日 (22)
2021年07月28日 (40)
2021年07月27日 (32)
2021年07月26日 (79)
2021年07月23日 (29)
2021年07月22日 (30)
2021年07月21日 (42)
2021年07月20日 (16)
2021年07月19日 (90)
2021年07月16日 (35)

周排行