3D Rotating Cube – Pure HTML/CSS/JS

Model: openai/gpt-oss-120b Timestamp: 2025-11-03T19:59:37.490203Z Prompt: Please implement an html + js + css only project stored on a single html file that implements a 3d cube rotating. If you want you can add external dependencies as long as they are only included from cdns. ================================================================================ RESPONSE: ================================================================================ Below is a **single‑file** web page that shows a continuously rotating 3‑dimensional cube. All the markup, styling and script live inside one `` document; the only external resource used is a Google Font (optional) loaded from a CDN. You can copy the whole block into a file named `cube.html` and open it in any modern browser. ```html 3D Rotating Cube – Pure HTML/CSS/JS

``` ### How it works 1. **Perspective** – The `body` has a CSS `perspective: 800px;` which gives depth to any child using 3‑D transforms. 2. **Scene container** – `.scene` is centered with absolute positioning and animates a full rotation on both the X‑ and Y‑axes (`@keyframes rotateScene`). The animation runs forever (`infinite`) at a constant speed (`linear`). 3. **Cube faces** – Six `.face` elements are placed at `translateZ(100px)` (half of the cube size) and rotated appropriately to form a cube. 4. **Back‑face visibility** hides the backside of each face when it turns away from the camera. 5. **Controls** – Two buttons toggle the CSS animation’s `animationPlayState` between `'paused'` and `'running'`. Feel free to tweak sizes, colors, speed (`10s` in the animation), or add textures/images on the faces—everything stays inside this single HTML file. Enjoy! ================================================================================ METRICS: ================================================================================ Tokens/sec: 64.92 Total tokens: 1327 Prompt tokens: 51 Completion tokens: 1276 Total time: 19655ms Time to first token: 1011ms