纯CSS实现3D图像轮转

最新推荐文章于 2024-05-21 10:06:23 发布

whqet

最新推荐文章于 2024-05-21 10:06:23 发布

阅读量5.3k

点赞数 6

分类专栏： css3 less&sass CSS3演武场文章标签： SASS css3 pure css

本文链接：https://blog.csdn.net/whqet/article/details/20551535

版权

css3 同时被 3 个专栏收录

81 篇文章 3 订阅

订阅专栏

案例研究

52 篇文章 0 订阅

订阅专栏

CSS3演武场

44 篇文章 73 订阅

订阅专栏

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>

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可以使得代码结构清晰，逻辑性强，请大家研读提升！

---------------------------------------------------------------

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