Цитата
<!DOCTYPE html> <html> <head> <style> body { display: flex; justify-content: center; align-items: center; height: 100vh; } .cube { width: 300px; height: 300px; position: relative; transform-style: preserve-3d; animation: spin 20s linear infinite; } @keyframes spin { from { transform: rotateX(0deg) rotateY(0deg) rotateZ(0deg); } to { transform: rotateX(360deg) rotateY(360deg) rotateZ(360deg); } } .face { position: absolute; width: 100%; height: 100%; } .front { transform: translateZ(150px); background-color: hsl(0, 100%, 50%); } .back { transform: rotateY(180deg) translateZ(150px); background-color: hsl(50, 100%, 50%); } .right { transform: rotateY(90deg) translateZ(150px); background-color: hsl(100, 100%, 50%); } .left { transform: rotateY(-90deg) translateZ(150px); background-color: hsl(150, 100%, 50%); } .top { transform: rotateX(90deg) translateZ(150px); background-color: hsl(200, 100%, 50%); } .bottom { transform: rotateX(-90deg) translateZ(150px); background-color: hsl(250, 100%, 50%); } </style> </head> <body> <div class="cube"> <div class="face front"></div> <div class="face back"></div> <div class="face right"></div> <div class="face left"></div> <div class="face top"></div> <div class="face bottom"></div> </div> </body> </html>