利用html5和css3实现的3D滚动特效
今天给大家带来一款html5和css3实现的3D滚动特效。效果图如下:
代码如下:
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
大家评论
站长推荐
点击排行
- 1CSS控制文字在Div最底部显示
- 2Thinkphp5如何配置IP+端口访问项目模块
- 3elementUI el-dialog弹框居中
- 4教你如何搭建及优化站点
- 5国内互联网视频行业运营分析
- 6service mysql start出错,mysql不能启动,解决mysql: unrecognized service错误
- 7CSS实现悬浮顶部的Div工具栏
- 8记一次Thinkphp5.1框架mysql数据库崩溃(SQLSTATE [08004] Too many connections)
- 9连接SQL Server数据库提示:Login failed for user 'sa'错误的解决方案
- 10Thinkphp3.2在centos7上设置计划任务的方法