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的基本语法是什么

css的基本语法是：

1、css规则由选择器和一条或多条声明两个部分构成；

2、选择器通常是需要改变样式的HTML元素；

3、每条声明由一个属性和一个值组成；

4、属性和属性值被冒号分隔开。

感谢各位的阅读，以上就是“css怎么实现3D图像轮转效果”的内容了，经过本文的学习后，相信大家对css怎么实现3D图像轮转效果这一问题有了更深刻的体会，具体使用情况还需要大家实践验证。这里是编程网，小编将为大家推送更多相关知识点的文章，欢迎关注！