欢迎您来到懒之才-站长的分享平台!   学会偷懒,并懒出境界是提高工作效率最有效的方法!
首页 > 经验分享 > HTML > 利用html5和css3实现的3D滚动特效

利用html5和css3实现的3D滚动特效

2018-05-09 490 收藏 0 赞一个 0 真差劲 0 去评论

今天给大家带来一款html5和css3实现的3D滚动特效。效果图如下:

20150123075544_78027.jpg

代码如下:

html代码:

<divclass="container">
        <divclass="cube">
            <divclass="side side1">
            </div>
            <divclass="side side2">
            </div>
            <divclass="side side3">
            </div>
            <divclass="side side4">
            </div>
            <divclass="side side5">
            </div>
            <divclass="side side6">
            </div>
        </div>
    </div>
    <divclass="container container2">
        <divclass="cube">
            <divclass="side side1">
            </div>
            <divclass="side side2">
            </div>
            <divclass="side side3">
            </div>
            <divclass="side side4">
            </div>
            <divclass="side side5">
            </div>
            <divclass="side side6">
            </div>
        </div>
    </div>

css代码如下:

body{      
  height:100vh;      
}      
.container{      
  position:absolute;      
  height:100px;      
  width:100px;      
  left:33%;      
  top:50%;      
  -webkit-transform: translateX(-50%) translateY(-50%);      
          transform: translateX(-50%) translateY(-50%);      
  -webkit-perspective:400px;      
          perspective:400px;      
}      
.cube{      
  height:100px;      
  widht:100px;      
  -webkit-transform-origin:50%50%;      
          transform-origin:50%50%;      
  -webkit-transform-style:preserve-3d;      
          transform-style:preserve-3d;      
  -webkit-animation:rotate 4s infinite ease-in-out;      
          animation:rotate 4s infinite ease-in-out;      
}      
.side{      
  position:absolute;      
  display:block;      
  height:100px;      
  width:100px;      
}      
.side1{      
  background:#41C3AC;      
  -webkit-transform:translateZ(100px);      
          transform:translateZ(100px);      
}      
.side2{      
  background:#FF884D;      
  -webkit-transform:rotateY(90deg) translateZ(100px);      
          transform:rotateY(90deg) translateZ(100px);      
}      
.side3{      
  background:#32526E;      
  -webkit-transform:rotateY(180deg) translateZ(100px);      
          transform:rotateY(180deg) translateZ(100px);      
}      
.side4{      
  background:#65A2C5;      
  -webkit-transform:rotateY(-90deg) translateZ(100px);      
          transform:rotateY(-90deg) translateZ(100px);      
}      
.side5{      
  background:#FFCC5C;      
  -webkit-transform:rotateX(90deg) translateZ(100px);      
          transform:rotateX(90deg) translateZ(100px);      
}      
.side6{      
  background:#FF6B57;      
  -webkit-transform:rotateX(-90deg) translateZ(100px);      
          transform:rotateX(-90deg) translateZ(100px);      
}      
@-webkit-keyframes rotate{      
  0%{      
    -webkit-transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);      
  }      
  33.33%{      
     -webkit-transform:rotateX(360deg) rotateY(0deg)  rotateZ(0deg);          
  }      
  66.66%{      
     -webkit-transform:rotateX(360deg) rotateY(360deg)  rotateZ(0deg);      
  }      
  100%{      
     -webkit-transform:rotateX(360deg) rotateY(360deg)  rotateZ(360deg);      
  }      
}      
@keyframes rotate{      
  0%{      
    transform:rotateX(0deg) rotateY(0deg);      
  }      
  50%{      
    transform:rotateX(360deg) rotateY(0deg);          
  }      
  100%{      
    transform:rotateX(360deg) rotateY(360deg);      
  }      
}      
a{      
  font-family:helvetica;      
  color:#428bca;      
  text-align:center;      
  display:block;      
}      
.container2{      
  left:66%;      
}      
.container2 .side{      
  border-radius:50%;      
}


一、推荐使用迅雷或快车等多线程下载软件下载本站资源。

二、未登录会员无法下载,登录后可获得更多便利功能,若未注册,请先注册。

三、如果服务器暂不能下载请稍后重试!总是不能下载,请点我报错 ,谢谢合作!

四、本站大部分资源是网上搜集或私下交流学习之用,任何涉及商业盈利目的均不得使用,否则产生的一切后果将由您自己承担!本站将不对任何资源负法律责任.如果您发现本站有部分资源侵害了您的权益,请速与我们联系,我们将尽快处理.

五、如有其他问题,请加网站设计交流群(点击这里查看交流群 )进行交流。

六、如需转载本站资源,请注明转载来自并附带链接

七、本站部分资源为加密压缩文件,统一解压密码为:www.aizhanzhe.com

大家评论