这篇文章主要介绍“怎么使用css实现3D图像轮转效果”，在日常操作中，相信很多人在怎么使用css实现3D图像轮转效果问题上存在疑惑，小编查阅了各式资料，整理出简单好用的操作方法，希望对大家解答”怎么使用css实现3D图像轮转效果”的疑惑有所帮助！接下来，请跟着小编一起来学习吧！
首先看html文件，div.billboard为效果的容器，利用10个div.poster分割图像，每个poster中有三个face，分别用来承载三个图像。
XML/HTML Code复制内容到剪贴板
计算
安全
数据库
网络和加速
企业服务
<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 Code复制内容到剪贴板
//变量初始化
//图像分块个数，如要更改，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;}
}到此，关于“怎么使用css实现3D图像轮转效果”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注亿速云网站，小编会继续努力为大家带来更多实用的文章！
亿速云「云服务器」，即开即用、新一代英特尔至强铂金CPU、三副本存储NVMe SSD云盘，价格低至29元/月。点击查看>>
免责声明：本站发布的内容（图片、视频和文字）以原创、转载和分享为主，文章观点不代表本网站立场，如果涉及侵权请联系站长邮箱：is@yisu.com进行举报，并提供相关证据，一经查实，将立刻删除涉嫌侵权内容。
原文链接：https://my.oschina.net/u/4581316/blog/4481303
