🌀 Bloco Giratório

📄 Como criar um cubo 3D com CSS

.cube {
  transform-style: preserve-3d;
  animation: spin 5s infinite linear;
}
.face {
  position: absolute;
  width: 100px;
  height: 100px;
  background: blue;
  transform: translateZ(50px);
}
    

📚 Documentação

• O cubo é construído com 6 faces posicionadas com transformações 3D.
• CSS `transform-style: preserve-3d` é essencial para manter o efeito tridimensional.
• Você pode usar `perspective` para criar profundidade visual.
• O `@keyframes` gira o cubo suavemente com `rotateX()` e `rotateY()`.

🔍 Curiosidades

O CSS 3D permite criar animações e formas tridimensionais apenas com código CSS, sem precisar de JavaScript complexo ou WebGL.