纯html5+css3打造的3D滚动特效实例 - HTML5+CSS3教程 - 科蚁网
请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

科蚁网 科蚁网 科蚁学院 HTML5+CSS3教程 查看内容

纯html5+css3打造的3D滚动特效实例

2015-6-1 23:45| 发布者: admin| 查看: 3156| 评论: 3|来自: 网络搜集

摘要: 本文将分享一个超酷的纯html5+css3实例的3D滚动特效实例,学习html5的同学可以看一下。

实现的代码。

html代码:

[代码]css代码:

[代码]xml代码:


css3代码: 

[代码]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%;
}


鲜花

握手

雷人
2

路过

鸡蛋

刚表态过的朋友 (2 人)

发表评论

最新评论

引用 QQ群521595826 2016-1-5 22:59
【怎么学好HTML5】想学习HTML5注重的是实战,如果你真的想学习HTML5可以来这个群【521-595-826】这里有很多人指导你一起学习,还有免费的课程分享给你
引用 筑墙碎梦 2015-10-30 09:13
感谢分享
引用 筑墙碎梦 2015-10-30 09:13
afsefsfsdf

查看全部评论(3)

月度热门文章


关闭

站长推荐上一条 /1 下一条

客服中心 官方QQ群