网站首页
高清电影
无损音乐
游戏攻略
电脑教程
破解资源
站长资源
软件下载
一款利用html5和css3实现的3D滚动特效的教程
(编辑:jimmy 日期: 2024/10/31 浏览:
2
)
今天给大家带来一款html5和css3实现的3D滚动特效。效果图如下:
实现的代码。
html代码:
XML/HTML Code复制内容到剪贴板
<div class="container">
<div class="cube">
<div class="side side1">
</div>
<div class="side side2">
</div>
<div class="side side3">
</div>
<div class="side side4">
</div>
<div class="side side5">
</div>
<div class="side side6">
</div>
</div>
</div>
<div class="container container2">
<div class="cube">
<div class="side side1">
</div>
<div class="side side2">
</div>
<div class="side side3">
</div>
<div class="side side4">
</div>
<div class="side side5">
</div>
<div class="side side6">
</div>
</div>
</div>
css3代码:
CSS Code复制内容到剪贴板
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%;
}
上一篇:
一款基于css3和jquery实现的动画显示弹出层按钮教程
下一篇:
一款基于css3的列表toggle特效实例教程
一句话新闻
高通与谷歌联手!首款骁龙PC优化Chrome浏览器发布
高通和谷歌日前宣布,推出首次面向搭载骁龙的Windows PC的优化版Chrome浏览器。
在对骁龙X Elite参考设计的初步测试中,全新的Chrome浏览器在Speedometer 2.1基准测试中实现了显著的性能提升。
预计在2024年年中之前,搭载骁龙X Elite计算平台的PC将面世。该浏览器的提前问世,有助于骁龙PC问世就获得满血表现。
谷歌高级副总裁Hiroshi Lockheimer表示,此次与高通的合作将有助于确保Chrome用户在当前ARM兼容的PC上获得最佳的浏览体验。
最新资源
宝丽金群星.1990-宝丽金90超白金精丫宝丽金】2C
抖音神曲《抖烧第四季DSD》DTS+WAV
群星《超炫电子古典》2CD【DTS-WAV】
Sleepy Cat《Feline Rain Soothing Music for C
Sleepy Cat《Feline Rain Soothing Music for C
群星《初声证明2324》[320K/MP3][41.39MB]
S14全球总决赛T1战队怎么样 全球总决赛T1战队详
S14全球总决赛GEN战队怎么样 全球总决赛GEN战队
全球总决赛lck参赛队伍是哪些 全球总决赛lck所有
《真三国无双起源》PC版21:9超宽屏展示:压迫力拉
首页
音乐
电影
资源