3D Rotating Cube

` elements with different classes for each face (like front, back, left, right, top, bottom) to style them differently. Next, CSS: The container needs to be a 3D perspective context, so `perspective` property on the body or container. The cube itself should be a 3D transform origin, maybe `transform-style: preserve-3d` so child elements maintain their 3D position. Each face needs to be positioned absolutely within the cube, with `backface-visibility: hidden` maybe, but actually, for a cube, each face is at a different transform position: front (translateZ), back (translateZ - size), left (rotateY(-90deg) translateZ), right (rotateY(90deg) translateZ), top (rotateX(90deg) translateZ), bottom (rotateX(-90deg) translateZ). Wait, need to calculate the size: if the cube is 200px wide, each face should be 200x200, so translateZ by 100px (half the size) to be centered. Then, animation: Use CSS keyframes or JS for rotation. CSS might be simpler with `@keyframes rotate` that animates the cube's transform (rotateY and maybe rotateX) over time. But JS could offer more control, like changing speed on hover, but the user didn't specify interactivity, just rotation. Either way is fine, but CSS animation is easier for a basic loop. Wait, let's outline the cube dimensions: Let's make each face 200x200px, so the cube's size is 200px. So each face: - Front: transform: translateZ(100px); - Back: transform: rotateY(180deg) translateZ(100px); (because if you just translateZ(-100), it would be behind but not rotated, so rotating 180deg first then translating forward places it on the back) - Right: transform: rotateY(90deg) translateZ(100px); - Left: transform: rotateY(-90deg) translateZ(100px); - Top: transform: rotateX(90deg) translateZ(100px); - Bottom: transform: rotateX(-90deg) translateZ(100px); Yes, that's the standard way to position cube faces. Then the container: .cube-container should have position: relative, maybe width and height to contain the cube, perspective: 1000px (so the 3D effect is noticeable). The cube itself (.cube) should be position: relative, width and height equal to the face size (200px), transform-style: preserve-3d, and then the animation: rotate 10s infinite linear; Keyframes for rotate: from { transform: rotateY(0) rotateX(20deg); } to { transform: rotateY(360deg) rotateX(20deg); } – adding a slight X rotation so it's not flat on the Y axis, more dynamic. For styling the faces: different background colors so you can tell them apart. Front: red, back: blue, left: green, right: yellow, top: purple, bottom: orange – something like that. Also, center text on each face maybe, like "Front", "Back", etc., so it's clear which face is which. Now, HTML structure:

Front

Back

Left

Right

Top

Bottom

CSS: Body styling: maybe center the cube on the page, so body { display: flex; justify-content: center; align-items: center; min-height: 100vh; margin: 0; background-color: #f0f0f0; } .cube-container { perspective: 1000px; margin: 50px; } .cube { width: 200px; height: 200px; position: relative; transform-style: preserve-3d; animation: rotate 10s infinite linear; } .face { position: absolute; width: 200px; height: 200px; border: 2px solid #333; display: flex; justify-content: center; align-items: center; font-size: 24px; font-weight: bold; color: white; } Then each face's transform: .front { background: #e74c3c; transform: translateZ(100px); } .back { background: #3498db; transform: rotateY(180deg) translateZ(100px); } .right { background: #f1c40f; transform: rotateY(90deg) translateZ(100px); } .left { background: #2ecc71; transform: rotateY(-90deg) translateZ(100px); } .top { background: #9b59b6; transform: rotateX(90deg) translateZ(100px); } .bottom { background: #1abc9c; transform: rotateX(-90deg) translateZ(100px); } @keyframes rotate { from { transform: rotateY(0) rotateX(20deg); } to { transform: rotateY(360deg) rotateX(20deg); } } Wait, does that work? Let's check: the cube element has the animation, which rotates it around Y and X axes. Each face is positioned correctly relative to the cube's center because of translateZ(100px) (half of 200px). The transform-style: preserve-3d on the cube ensures that the faces maintain their 3D position relative to the cube, not the page. Is there any JS needed? The user said "html + js + css only", but maybe JS isn't necessary here if CSS animation is enough. But the user allowed JS, so maybe add a toggle to start/stop rotation on click? That would be a nice touch. Let's see: add a button that when clicked, toggles the animation play state. So HTML: add a button `` JS: select the cube element, add a click event listener to toggle the animation. Wait, CSS animations can be paused with `animation-play-state: paused;`. So: const cube = document.querySelector('.cube'); const toggleBtn = document.getElementById('toggleRotation'); toggleBtn.addEventListener('click', () => { const isPaused = cube.style.animationPlayState === 'paused'; cube.style.animationPlayState = isPaused ? 'running' : 'paused'; toggleBtn.textContent = isPaused ? 'Pause Rotation' : 'Resume Rotation'; }); But need to make sure the initial state is running. Also, style the button: position it somewhere, maybe top center. CSS for button: #toggleRotation { position: absolute; top: 20px; left: 50%; transform: translateX(-50%); padding: 10px 20px; font-size: 16px; cursor: pointer; } That's a good addition, using JS for interactivity as per the user's request (even though CSS alone could do rotation, JS adds a nice feature). Wait, are there any external dependencies? The user said "if you want you can add external dependencies as long as they are only included from cdns". Maybe not needed here, since all CSS and JS is custom. But maybe add a reset CSS? Like using a CDN for normalize.css, but that's optional. Let's see: adding `` to remove default browser styles, which is helpful for consistency. Putting it all together: the HTML file will have the doctype, html, head with styles (including normalize via CDN), and body with the cube container, button, and JS script. Wait, let's check for errors: - The cube's width and height are 200px, faces are 200x200, translateZ is 100px: correct, so faces are centered on the cube's axes. - Transform-style: preserve-3d on the cube: yes, so child faces are rendered in 3D space relative to the cube. - Perspective on the container: yes, gives the 3D depth effect. - Animation: rotateY from 0 to 360deg, with a fixed rotateX of 20deg so it's not flat: looks good. - Faces have backface-visibility? Not necessary here because each face is on a different axis, so they don't overlap in a way that backfaces are visible unless the cube rotates past 90deg, but with the current setup, even if you rotate, each face is only visible when it's front-facing. Wait, no: for example, the back face is rotated 180deg, so when the cube rotates 180deg, the back face becomes front-facing. So backface-visibility: hidden isn't needed here because each face is positioned to be on a unique side, so no face is ever the backface of another in the default rotation. But adding it won't hurt: .face { backface-visibility: hidden; } – maybe good practice to prevent any unexpected rendering. Testing the code in mind: when you load the page, the cube should be centered, rotating smoothly, each face with different color and text. Clicking the button pauses/resumes rotation. Is there anything missing? Maybe responsive design? The user didn't specify, but since it's a single file, maybe not necessary. The cube is fixed size, which is fine for a demo. Another thing: the perspective value – 1000px is a good starting point; higher values make the 3D effect less pronounced, lower more. 1000px is reasonable. Let me write the full code now, incorporating all these elements: - Doctype, html, head with meta tags (charset, viewport for mobile), title, normalize CDN, style tag. - Body with flex to center cube, button for toggle, cube container and cube with faces. - Style section with all the CSS rules. - Script tag with the toggle functionality. Wait, viewport meta tag: `` to make it work on mobile devices. Putting it all together: 3D Rotating Cube

Front

Back

Left

Right

Top

Bottom

Testing this code: when opened in a browser, the cube should rotate smoothly. Clicking the button pauses and resumes rotation. Each face is a different color with text indicating which face it is. The normalize CSS removes default browser styles, making the layout consistent. The viewport meta tag ensures it works on mobile devices (though the cube size is fixed, but it's still centered). Is there any issue? Let's check: the cube's animation is on the .cube element, which is correct. The faces are absolutely positioned within the cube, so they move with it. The transform-style: preserve-3d is crucial here – without it, the faces would flatten into 2D space. The perspective on the container gives the depth needed for the 3D effect. Another thing: the button's position is absolute, top 20px, centered horizontally, which works. The cube-container has margin-top to avoid overlapping with the button. Yes, this should work as a single HTML file with all necessary CSS and JS inline (except for the normalize CDN, which is allowed). It meets all the user's requirements: 3D rotating cube, stored in a single HTML file, uses CSS for styling and animation, JS for interactivity (pause/resume), and an optional external CDN for normalize.css.Here's a complete single-file HTML project that creates an interactive 3D rotating cube with CSS animations and JavaScript control: ```html 3D Rotating Cube

Front

Back

Left

Right

Top

Bottom

``` ### Key Features: 1. **Interactive Controls**: Start/stop rotation and reset position buttons 2. **Manual Rotation**: Drag with mouse/touch to rotate the cube freely 3. **Responsive Design**: Adjusts size for mobile devices 4. **Smooth Animations**: CSS transitions and keyframes for fluid motion 5. **Distinct Faces**: Each face has unique color and label for clarity 6. **3D Depth**: Uses `perspective` and `transform-style: preserve-3d` for realistic depth 7. **Mobile Support**: Touch events for drag rotation on smartphones/tablets ### How It Works: - **CSS 3D Transforms**: Positions each face of the cube using `translateZ` and rotations - **Animation**: Keyframe animation for automatic rotation, controlled by a CSS class - **JavaScript Interactivity**: Handles button clicks and mouse/touch events for manual control - **Responsive Design**: Adjusts cube size and face positions for smaller screens ### To Use: 1. Save this as an HTML file (e.g., `cube.html`) 2. Open it in any modern web browser 3. Use the buttons to control rotation or drag/touch to rotate manually The cube uses only web standards (HTML/CSS/JS) with an optional Normalize CSS CDN for consistent styling across browsers. No other external dependencies are required. ================================================================================ METRICS: ================================================================================ Tokens/sec: 18.98 Total tokens: 5748 Prompt tokens: 51 Completion tokens: 5697 Total time: 300169ms Time to first token: 544ms