CSS
body {
background: #00c07f;
}
figure {
width: 210px;
height: 210px;
animation: rotation 7s linear infinite;
position: absolute;
top: 50%;
left: 50%;
margin-top: -105px;
margin-left: -105px;
transform-style: preserve-3d;
}
.face {
width: 100%;
height: 100%;
position: absolute;
transform-origin: center;
}
.face div {
border: 6px double #2c3e50;
width: 70px;
height: 70px;
display: inline-block;
box-sizing: border-box;
vertical-align: top;
}
.front {
transform: translate3d(0,0,105px);
}
.back {
transform: rotateY(180deg) translate3d(0,0,105px);
}
.left {
transform: rotateY(-90deg) translate3d(0,0,105px);
}
.right {
transform: rotateY(90deg) translate3d(0,0,105px);
}
.top {
transform: rotateX(90deg) translate3d(0,0,105px);
}
.bottom {
transform: rotateX(-90deg) translate3d(0,0,105px);
}
@keyframes rotation {
from { transform: rotateY(0) rotateX(0); }
to { transform: rotateY(-360deg) rotateX(360deg); }
}
