.scene {
 width: 400px;
 height: 400px;
 perspective: 1000px;
}

.cube {
 width: 100%;
 height: 100%;
 position: relative;
 transform-style: preserve-3d;
 animation: rotate 12s infinite linear;
}

.face {
 position: absolute;
 width: 200px;
 height: 200px;
 background: rgba(0, 150, 255, 0.8);
 border: 2px solid #fff;
 box-shadow: inset 0 0 20px rgba(0, 0, 0, 0.5);
 display: flex;
 align-items: center;
 justify-content: center;
 font-size: 40px;
 color: white;
 font-family: Arial, sans-serif;
 backface-visibility: hidden;
}

/* Position each face in 3D space */
.front {
 transform: translateZ(100px);
 background: rgba(255, 0, 0, 0.8);
}
.back {
 transform: rotateY(180deg) translateZ(100px);
 background: rgba(255, 100, 0, 0.8);
}
.right {
 transform: rotateY(90deg) translateZ(100px);
 background: rgba(0, 200, 0, 0.8);
}
.left {
 transform: rotateY(-90deg) translateZ(100px);
 background: rgba(0, 100, 255, 0.8);
}
.top {
 transform: rotateX(90deg) translateZ(100px);
 background: rgba(255, 255, 0, 0.8);
}
.bottom {
 transform: rotateX(-90deg) translateZ(100px);
 background: rgba(150, 0, 255, 0.8);
}

/* Optional: Add labels */
.front::before {
 content: "Front";
}
.back::before {
 content: "Back";
}
.right::before {
 content: "Right";
}
.left::before {
 content: "Left";
}
.top::before {
 content: "Top";
}
.bottom::before {
 content: "Bottom";
}

/* Rotate the entire cube */
@keyframes rotate {
 from {
  transform: rotateX(0deg) rotateY(0deg);
 }
 to {
  transform: rotateX(360deg) rotateY(360deg);
 }
}

/* Optional: Hover to pause */
.cube:hover {
 animation-play-state: paused;
}