Document
.scene {
width: 200px;
height: 200px;
perspective: 600px;
}
.cube {
width: 100%;
height: 100%;
position: relative;
transform-style: preserve-3d;
animation: spinCube 5s infinite linear;
}
@keyframes spinCube { from { transform: rotateX(0deg) rotateY(0deg); } to { transform: rotateX(360deg) rotateY(720deg); } }
.face { position: absolute; width: 200px; height: 200px; }
.front { background-color:red; transform: translateZ(100px); }
.back { background-color:green; transform: rotateY(180deg) translateZ(100px); }
.left { background-color:pink; transform: rotateY(-90deg) translateZ(100px); }
.right { background-color:cyan; transform: rotateY(90deg) translateZ(100px); }
.top { background-color:magenta; transform: rotateX(90deg) translateZ(100px); }
.bottom { background-color:brown; transform: rotateX(-90deg) translateZ(100px); }
