<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>transform</title>
<style>
body{margin:0}
.3d-box,
.3d-box.outer,
.3d-box.inner,
.3d-box.inner div {
height: 160px;width: 160px;font-size: 18px;
text-align: center ;line-height: 160px;
}
.3d-box{
margin: 0 auto;
animation:fly 4s linear infinite ;
transform-style:preserve-3d;
}
@keyframes fly{
0%{transform: rotateY(0);}
100%{transform:rotateY(360deg);}
}
.3d-box.outer{
transform-style: preserve-3d;
transform: rotateX(55deg);
position: relative;
}
.3d-box.inner div{
transform-style: preserve-3d;position: absolute;
}
.3d-box.plane-1{
background: rgba(127,127,255,0.3);right: 80px;transform: rotateY(90deg);
}
.3d-box.plane-2{
background: rgba(127,255,127,0.3);left: 80px;transform: rotateY(90deg);
}
.3d-box.plane-3{
background: rgba(127,255,255,0.3);transform: translateZ(80px);
}
.3d-box.plane-4{
background: rgba(0,255,255,0.3);transform: translateZ(-80px);
}
.3d-box.plane-5{
background: rgba(0,255,127,0.3);transform: rotateX(-90deg);bottom: -80px;
}
.3d-box.plane-6{
background: rgba(127,127,127,0.3);transform: rotateX(-90deg);bottom: -80px;
}
</style>
</head>
<body>
<br/><br/><br/><br/>
<div class="3d-box">
<div class="outer">
<div class="inner">
<div class="plane-1">右 1 张</div>
<div class="plane-2">左 2 三</div>
<div class="plane-3">后 3 封</div>
<div class="plane-4">前 4 @</div>
<div class="plane-5">下 5 前</div>
<div class="plane-6">上 6 端</div>
</div>
</div>
</div>
</body>
</html>
class类名，类名不能以数字开头