.container {
perspective: 800px;
}

.cube {
position: relative;
width: 200px;
transform-style: preserve-3d;
animation: rotate 5s infinite;
}

.face {
position: absolute;
width: 200px;
height: 200px;
background-color: rgba(0, 0, 255, 0.5);
line-height: 200px;
text-align: center;
font-size: 24px;
font-weight: bold;
}

.front {
transform: translateZ(100px);
}

.back {
transform: rotateY(180deg) translateZ(100px);
}

.left {
transform: rotateY(-90deg) translateZ(100px);
}

.right {
transform: rotateY(90deg) translateZ(100px);
}

.top {
transform: rotateX(90deg) translateZ(100px);
}

.bottom {
transform: rotateX(-90deg) translateZ(100px);
}

@keyframes rotate {
from { transform: rotateY(0); }
to { transform: rotateY(360deg); }
}

Cube Animation using CSS

In this article, we will create a simple cube animation using CSS.