3D cube
The .anim-3d-demo stage holds a 6×6 rem cube: each labeled face is offset by half the edge length on Z and the assembly spins on X and Y.
Front
Back
Right
Left
Top
Base
Widely Supported
Quick implementation
@keyframes cube-spin {
to { transform: rotateX(-360deg) rotateY(720deg); }
}
.anim-3d-demo { perspective: 900px; min-height: 15rem; }
.cube-wrap {
transform-style: preserve-3d;
animation: cube-spin 18s linear infinite;
}
.cube-face--front { transform: translateZ(3rem); }Prompt this to your LLM
Logos and loaders.
You are building a CSS-only 3D cube.
Goal: six faces, each translated half the edge length on Z after rotation; outer rotate animation for showcase.
Constraints:
- Edge length 6rem; translateZ 3rem.
- prefers-reduced-motion: static oblique view, no spin.
Return HTML + CSS.Why this matters in 2026
Classic demo of the transform stack—still useful for teaching 3D CSS and lightweight brand marks.
The logic
Order matters: rotate then translateZ pushes each face outward from the shared origin.
Accessibility & performance
Long spin loops can be distracting—honor reduced motion and keep text on faces optional.