.cube-container { width: 100%; height: 500px; display: flex; justify-content: center; align-items: center; perspective: 1000px; overflow: hidden; } .cube { width: 300px; height: 300px; position: relative; transform-style: preserve-3d; animation: rotate 20s infinite linear; } .cube-face { position: absolute; width: 300px; height: 300px; border: 3px solid #00ff00; background-color: rgba(0, 255, 0, 0.1); backface-visibility: visible; } .cube-front { transform: rotateY(0deg) translateZ(150px); } .cube-back { transform: rotateY(180deg) translateZ(150px); } .cube-right { transform: rotateY(90deg) translateZ(150px); } .cube-left { transform: rotateY(-90deg) translateZ(150px); } .cube-top { transform: rotateX(90deg) translateZ(150px); } .cube-bottom { transform: rotateX(-90deg) translateZ(150px); } @keyframes rotate { 0% { transform: rotateX(0deg) rotateY(0deg); } 100% { transform: rotateX(360deg) rotateY(360deg); } }