快上网专注成都网站设计 成都网站制作 成都网站建设
成都网站建设公司服务热线:028-86922220

网站建设知识

十年网站开发经验 + 多家企业客户 + 靠谱的建站团队

量身定制 + 运营维护+专业推广+无忧售后,网站问题一站解决

如何使用css实现3D图像轮转效果-创新互联

这篇文章主要为大家展示了“如何使用css实现3D图像轮转效果”,内容简而易懂,条理清晰,希望能够帮助大家解决疑惑,下面让小编带领大家一起研究并学习一下“如何使用css实现3D图像轮转效果”这篇文章吧。

创新互联主要从事成都网站建设、成都网站制作、网页设计、企业做网站、公司建网站等业务。立足成都服务扎赉特,10年网站建设经验,价格优惠、服务专业,欢迎来电咨询建站服务:13518219792

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

XML/HTML Code复制内容到剪贴板

     
         
        
              
              
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                             

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图像轮转效果”这篇文章的所有内容,感谢各位的阅读!相信大家都有了一定的了解,希望分享的内容对大家有所帮助,如果还想学习更多知识,欢迎关注创新互联行业资讯频道!


本文标题:如何使用css实现3D图像轮转效果-创新互联
文章起源:http://6mz.cn/article/codesp.html

免费获取网站建设与品牌策划方案报价

*主要业务范围包括:高端网站建设, 集团网站建设(网站建设网站制作)找网站建设公司就上快上网。
提交需求

    联系我们

    028-86922220
  • 手机:13518219792
  • 地址:成都市太升南路288号锦天国际A幢1002号
  • 24小时服务热线:400-028-6601

    网站建设服务

  • 网页设计
  • 网站制作
  • 网站开发

    网站推广服务

  • 营销网站建设
  • 百度快速排名
  • 整站网站推广

    网站运维服务

  • 基础维护
  • 网站改版
  • 网站维护

    FOLLOW US

  • 微信二维码

    微信二维码

Copyright © 2022 成都快上网科技有限公司 成都网站建设公司-选网站建设公司快上网!国内专业的网站制作公司!
All Rights Reserved 版权所有 蜀ICP备19037934号-11