怎么使用css实现3D图像轮转效果

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图像轮转效果”的学习就结束了，希望能够解决大家的疑惑。理论与实践的搭配能更好的帮助大家学习，快去试试吧！若想继续学习更多相关知识，请继续关注创新互联网站，小编会继续努力为大家带来更多实用的文章！

• 建站热线：13518219792
• 
  微信扫一扫在线咨询
• QQ客服：
• 案 例
• 价 格