纯CSS实现3D图像轮转

「爱情、让人受尽委屈。」 2022-08-25 11:58 224阅读 0赞

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

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

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][whqet]，关注web前端开发技术，分享网页相关资源。  
\---------------------------------------------------------------

[Link 1]: http://codepen.io/whqet/pen/jDkua
[Link 2]: http://codepen.io/whqet/share/zip/jDkua
[whqet]: http://blog.csdn.net/whqet