021 Rotating CSS Cube
Rotating CSS Cube: A 3D cube built purely with CSS transforms, each face a different gradient pattern with a label, rotating continuously on two axes.
More
1 test · 5 finished runs (0 agent, 5 raw one-shot) · 5 live demos
The prompt
Rotating CSS Cube: A 3D cube built purely with CSS transforms, each face a different gradient pattern with a label, rotating continuously on two axes. Hovering pauses it and a row of six buttons snaps it smoothly to show a chosen face. No JavaScript except the buttons. Build it as ONE self-contained HTML file: inline CSS and JavaScript only, no libraries or frameworks, and no external requests of any kind (no CDNs, web fonts, images or audio files); anything visual or audible is made in code (HTML/CSS, SVG, Canvas, WebGL or WebAudio). It must work when opened directly from disk, fit the browser window responsively, and run without console errors. Output ONLY the complete HTML file, starting with <!DOCTYPE html> and ending with </html>, with no explanation or markdown fences.
Same prompt, all models: step through 5 runsIn the gallery: one player, arrow keys or swipe.