The code

Plain HTML and CSS with no dependencies. Copy a single file, or choose "Full file" for a complete page you can save as index.html and open in a browser.

<div class="scene">
  <div class="cube">
    <div class="face front">Front</div>
    <div class="face back">Back</div>
    <div class="face right">Right</div>
    <div class="face left">Left</div>
    <div class="face top">Top</div>
    <div class="face bottom">Bottom</div>
  </div>
</div>

The AI prompt

Paste this into an AI coding tool to generate the same 3d scene, then ask it to adapt the colours, text or framework to your project.

Create a rotating 3D cube using only HTML and CSS (no JavaScript, no canvas, no libraries).

Requirements:
- A "scene" wrapper, 200px square, with perspective: 800px.
- Inside it a "cube" element with transform-style: preserve-3d that holds six absolutely positioned "face" divs labelled Front, Back, Right, Left, Top and Bottom.
- Position each face with a rotation followed by translateZ(100px) (half the cube size): front rotateY(0), back rotateY(180deg), right rotateY(90deg), left rotateY(-90deg), top rotateX(90deg), bottom rotateX(-90deg).
- Faces are semi-transparent indigo (rgba(37,6,173,0.55)) with a 2px translucent white border and white bold labels; the top and bottom faces are semi-transparent orange.
- Animate the cube with a keyframe animation that keeps rotateX(-20deg) and rotates rotateY from 0 to 360deg over 12 seconds, linear, infinite. Pause it on hover.
- Under prefers-reduced-motion, stop the animation and show the cube at a fixed angle.
- Centre it on a dark radial-gradient page.

Return one HTML file with the CSS in a <style> tag.

How to build it, step by step

1. 1

   Add perspective to a parent element. Perspective is the distance between the viewer and the scene; without it, 3D rotations look flat. Smaller values exaggerate the depth.

2. 2

   Give the cube transform-style: preserve-3d. By default a browser flattens children into their parent's plane; this property keeps them in real 3D space.

3. 3

   Stack all six faces in the same place with position: absolute and inset: 0.

4. 4

   Move each face outward. The order matters: rotate the face to point in its direction first, then translateZ by half the cube's size to push it out along that direction.

5. 5

   Animate the cube element, not the faces. Rotating the parent rotates all six faces together as one solid object.

6. 6

   Keep a constant rotateX in both keyframes so you look slightly down at the cube and can see its top.

Customisation tips

• To resize the cube, change the scene width and height and set every translateZ to half that value.
• Put images or content inside the faces to make a 3D product box or image cube.
• Add backface-visibility: hidden with opaque backgrounds for a solid cube where you cannot see through to the back.

More 3d scenes