* {
margin: 0;
padding: 0;
}
body{
perspective: 1000px;
}
#box {
position: relative;
margin: 300px auto;
width: 200px;
font-size: 60px;
transform-style:preserve-3d;
transform: rotateX(-30deg) rotateY(30deg);
animation:per linear 10s infinite ;
}
@keyframes per{
0%{transform:rotateX(0deg) rotateY(0deg) rotateZ(0deg);}
10%{transform:rotateX(36deg) rotateY(36deg) rotateZ(36deg);}
20%{transform:rotateX(72deg) rotateY(72deg) rotateZ(72deg);}
30%{transform:rotateX(108deg) rotateY(108deg) rotateZ(108deg);}
40%{transform:rotateX(144deg) rotateY(144deg) rotateZ(144deg);}
50%{transform:rotateX(180deg) rotateY(180deg) rotateZ(180deg);}
60%{transform:rotateX(216deg) rotateY(216deg) rotateZ(216deg);}
70%{transform:rotateX(252deg) rotateY(252deg) rotateZ(252deg);}
80%{transform:rotateX(288deg) rotateY(288deg) rotateZ(288deg);}
90%{transform:rotateX(324deg) rotateY(324deg) rotateZ(324deg);}
100%{transform:rotateX(360deg) rotateY(360deg) rotateZ(360deg);}
}
#box>div{
position: absolute;
width: 200px;
height: 200px;
background: rgba(0,0,0,0.3);
border: 1px solid #999;
color: white;
text-align: center;
line-height: 200px;
}
#d1{
transform: translateZ(100px);
}
#d2{
transform: rotateY(-180deg) translateZ(100px);
}
#d3{
transform: rotateX(-90deg) translateZ(100px);
}
#d4{
transform: rotateX(90deg) translateZ(100px);
}
#d5{
transform: rotateY(90deg) translateZ(100px);
}
#d6{
transform: rotateY(-90deg) translateZ(100px);
}