立方体
来自CloudWiki
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>立方体</title>
<style>
.box{
width: 300px;
height:300px;
margin:300px auto;
perspective:500px;
}
.con{
position:relative;
width:300px;
height:300px;
transform-style:preserve-3d;
transform-origin:50% 50% -150px;
animation:rotate 4s infinite;
}
.con .side{
position:absolute;
width:300px;
height:300px;
font-size:44px;
line-height: 300px;
text-align: center;
}
.con .before{
background-color: rgba(0,0,0,0.4);
}
.con .left{
background-color: rgba(255,0,0,0.4);
left:-300px;
top:0;
transform:rotateY(-90deg);
transform-origin:right;
}
.con .right{
background-color: rgba(255,255,0,0.4);
left:300px;
top:0;
transform:rotateY(90deg);
transform-origin:left;
}
.con .top{
background-color: rgba(0,255,0,0.4);
left:0;
top:-300px;
transform:rotateX(90deg);
transform-origin:bottom;
}
.con .bottom{
background-color: rgba(0,0,255,0.4);
left:0;
top:300px;
transform:rotateX(-90deg);
transform-origin:top;
}
.con .back{
background-color: rgba(200,122,0,0.4);
transform:translateZ(-300px);
}
@keyframes rotate{
0%{
transform:rotateX(0) rotateY(0);
}
50%{
transform:rotateX(0) rotateY(360deg);
}
100%{
transform:rotateX(360deg) rotateY(360deg);
}
}
</style>
</head>
<body>
<div class="box">
<div class="con">
<div class="side before">前</div>
<div class="side back">后</div>
<div class="side top">上</div>
<div class="side bottom">下</div>
<div class="side left">左</div>
<div class="side right">右</div>
</div>
</div>
</body>
</html>
