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="iso" tabindex="0" aria-label="Technology stack, hover to expand">
  <div class="layer" style="--i: 0"><b>Database</b><span>PostgreSQL</span></div>
  <div class="layer" style="--i: 1"><b>API</b><span>Node.js</span></div>
  <div class="layer" style="--i: 2"><b>Framework</b><span>Next.js</span></div>
  <div class="layer top" style="--i: 3"><b>Interface</b><span>React</span></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 an isometric 3D stack of cards using only HTML and CSS (no JavaScript).

Requirements:
- A container, 240px by 150px, with transform-style: preserve-3d and transform: rotateX(58deg) rotateZ(-40deg) to create an isometric viewing angle. It has tabindex="0".
- Four absolutely positioned "layer" cards inside it, each with an inline CSS variable --i from 0 to 3 and two lines of text: a bold layer name (Database, API, Framework, Interface) and a technology (PostgreSQL, Node.js, Next.js, React).
- Each layer is lifted with transform: translateZ(calc(var(--i) * var(--gap))) where --gap is a variable on the container, 34px by default.
- On :hover and :focus-visible of the container, change --gap to 70px so the layers float apart. Animate with a 0.6s transition on transform.
- Layers are white with a light border, 16px radius and a soft offset shadow; the top layer is indigo #2506ad with white text.
- Disable the transition under prefers-reduced-motion.
- Centre it on a dark background.

Return one HTML file with a <style> block.

How to build it, step by step

1. 1

   Stack the cards exactly on top of each other with position: absolute.

2. 2

   Rotate the container with rotateX and rotateZ. Tilting it back and turning it gives the classic isometric angle with no perspective property needed.

3. 3

   Add transform-style: preserve-3d to the container so the children can move in the third dimension.

4. 4

   Lift each card with translateZ multiplied by its index variable. Because the container is rotated, 'up' along Z appears as up and to the side on screen.

5. 5

   Store the spacing in one CSS variable and change only that variable on hover; every layer updates together.

6. 6

   Transition the transform for a smooth expansion.

Customisation tips

• Add more layers by adding elements with the next --i value.
• Animate --gap with a keyframe animation for a gentle breathing effect.
• Use this to explain anything layered: an app architecture, the OSI model or a pricing ladder.

More 3d scenes