CSS3实现3D立方体
2016-12-12 本文已影响0人
小纸人儿
利用CSS3 animation及transform实现一个404立方体盒子
点击查看效果
Paste_Image.png
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>3D立方体</title>
</head>
<style>
*{
margin: 0;
padding: 0;
}
body{
background: #000;
}
.box{
width: 200px;
height: 200px;
margin: 200px auto 0;
position: relative;
}
.box img{
width: 200px;
height: 200px;
}
.show{
width: 200px;
height: 200px;
transform-style:preserve-3d;/*建立3d空间*/
-webkit-animation:play 4s linear infinite;
/*-webkit-兼容谷歌和苹果 动画名称为play 运动时间4s 匀速 无线循环*/
-moz-animation:play 2s linear infinite;/*-moz-兼容火狐*/
-o-animation:play 2s linear infinite;/*兼容欧朋*/
-ms-animation:play 2s linear infinite;/*兼容ie8以上*/
}
.show div{
width: 200px;
height: 200px;
position: absolute;
top: 0;
left: 0;
color: #fff;
opacity: 0.5;/*透明度为50%*/
font-size: 60px;
text-align: center;
line-height: 200px;
}
.show div:nth-child(1){
background: #f00;
transform:translateZ(100px);/*往前移动100px*/
}
.show div:nth-child(2){
background: #ff0;
transform:translateX(100px) rotateY(90deg);
}
.show div:nth-child(3){
background: green;
transform:translateY(100px) rotateX(90deg);
}
.show div:nth-child(4){
background: #0f0;
transform:translateZ(-100px);
}
.show div:nth-child(5){
background: #00f;
transform:translateX(-100px) rotateY(90deg);
}
.show div:nth-child(6){
background: #0ff;
transform:translateY(-100px) rotateX(90deg);
}
@-webkit-keyframes play{
0%{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
100%{transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);}
}
@-moz-keyframes play{
0%{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
100%{transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);}
}
@-0-keyframes play{
0%{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
100%{transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);}
}
@-ms-keyframes play{
0%{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
100%{transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);}
}
</style>
<body>
<div class="box">
<div class="show">
<div>404</div>
<div>404</div>
<div>404</div>
<div>404</div>
<div>404></div>
<div>404</div>
</div>
</div>
</body>
</html>
