36 CSS Stacked Cards22 / 36

Pure CSSMIT licensed

Isometric Tower

A vertical structural column of cards layered tightly along a steep 3D plane, so the whole component reads like a sleek modern skyscraper. Hover to lift the tower's floors apart and inspect each level.

Published Updated

Live Demo
Try it

The code

<section class="scd-22" aria-label="Isometric tower of cards">
  <div class="scd-22__scene"><div class="scd-22__tower" tabindex="0">
    <div class="scd-22__floor" style="--i:0"><b>Rooftop</b></div>
    <div class="scd-22__floor" style="--i:1"><b>Sky lounge</b></div>
    <div class="scd-22__floor" style="--i:2"><b>Offices</b></div>
    <div class="scd-22__floor" style="--i:3"><b>Atrium</b></div>
    <div class="scd-22__floor" style="--i:4"><b>Lobby</b></div>
  </div></div>
</section>
.scd-22,
.scd-22 *,
.scd-22 *::before,
.scd-22 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.scd-22 {
  font-family: 'Segoe UI',system-ui,sans-serif;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8vh 20px;
  background: radial-gradient(circle at 50% 30%,#1a2030,#0a0d15);
}

.scd-22__scene {
  perspective: 1200px;
}

.scd-22__tower {
  position: relative;
  width: 200px;
  height: 300px;
  transform-style: preserve-3d;
  transform: rotateX(58deg) rotateZ(-42deg);
  transition: transform .5s;
}

.scd-22__floor {
  position: absolute;
  left: 0;
  top: 0;
  width: 180px;
  height: 180px;
  border-radius: 10px;
  background: linear-gradient(160deg,oklch(calc(0.78 - var(--i) * .05) 0.09 240),oklch(calc(0.64 - var(--i) * .05) 0.11 250));
  transform: translateZ(calc(var(--i) * 34px));
  box-shadow: 0 20px 30px -16px rgba(0,0,0,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  transition: transform .5s cubic-bezier(.3,.9,.3,1);
}

.scd-22__floor::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 34px;
  background: oklch(calc(0.5 - var(--i) * .04) 0.1 250);
  transform: translateZ(-34px);
  border-radius: 0 0 10px 10px;
}

.scd-22__floor b {
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .02em;
  text-shadow: 0 1px 2px rgba(0,0,0,.35),0 0 12px rgba(0,0,0,.15);
  text-align: center;
}

.scd-22__tower:hover .scd-22__floor,
.scd-22__tower:focus-visible .scd-22__floor {
  transform: translateZ(calc(var(--i) * 60px + 10px));
}

.scd-22__tower:focus-visible {
  outline: 3px solid oklch(0.7 0.12 240);
  outline-offset: 26px;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .scd-22__floor,
    .scd-22__tower {
    transition: none;
  }
}
/* No JavaScript — a steep shared isometric rotation plus per-floor translateZ builds the tower; :hover widens the gaps to separate the floors. */
Paste this into ChatGPT, Claude, Cursor, or any coding assistant. The block below is pre-framed with everything the AI needs to integrate this demo into your project — markup, styles, scoping notes, and the source URL. Hit Copy and paste straight into your chat.
Here's a working CSS Stacked Card from CodeFronts. Use it as-is or adapt to your framework. All classes are scoped under a unique prefix so the code won't collide with your existing styles. MIT licensed.
Demo: Isometric Tower
Source: https://codefronts.com/components/css-stacked-cards/isometric-tower/

A vertical structural column of cards layered tightly along a steep 3D plane, so the whole component reads like a sleek modern skyscraper. Hover to lift the tower's floors apart and inspect each level.
## HTML
```html
<section class="scd-22" aria-label="Isometric tower of cards">
  <div class="scd-22__scene"><div class="scd-22__tower" tabindex="0">
    <div class="scd-22__floor" style="--i:0"><b>Rooftop</b></div>
    <div class="scd-22__floor" style="--i:1"><b>Sky lounge</b></div>
    <div class="scd-22__floor" style="--i:2"><b>Offices</b></div>
    <div class="scd-22__floor" style="--i:3"><b>Atrium</b></div>
    <div class="scd-22__floor" style="--i:4"><b>Lobby</b></div>
  </div></div>
</section>
```
## CSS
```css
.scd-22,
.scd-22 *,
.scd-22 *::before,
.scd-22 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.scd-22 {
  font-family: 'Segoe UI',system-ui,sans-serif;
  width: 100%;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8vh 20px;
  background: radial-gradient(circle at 50% 30%,#1a2030,#0a0d15);
}

.scd-22__scene {
  perspective: 1200px;
}

.scd-22__tower {
  position: relative;
  width: 200px;
  height: 300px;
  transform-style: preserve-3d;
  transform: rotateX(58deg) rotateZ(-42deg);
  transition: transform .5s;
}

.scd-22__floor {
  position: absolute;
  left: 0;
  top: 0;
  width: 180px;
  height: 180px;
  border-radius: 10px;
  background: linear-gradient(160deg,oklch(calc(0.78 - var(--i) * .05) 0.09 240),oklch(calc(0.64 - var(--i) * .05) 0.11 250));
  transform: translateZ(calc(var(--i) * 34px));
  box-shadow: 0 20px 30px -16px rgba(0,0,0,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 14px;
  transition: transform .5s cubic-bezier(.3,.9,.3,1);
}

.scd-22__floor::before {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 100%;
  height: 34px;
  background: oklch(calc(0.5 - var(--i) * .04) 0.1 250);
  transform: translateZ(-34px);
  border-radius: 0 0 10px 10px;
}

.scd-22__floor b {
  color: #fff;
  font-weight: 800;
  font-size: 15px;
  letter-spacing: .02em;
  text-shadow: 0 1px 2px rgba(0,0,0,.35),0 0 12px rgba(0,0,0,.15);
  text-align: center;
}

.scd-22__tower:hover .scd-22__floor,
.scd-22__tower:focus-visible .scd-22__floor {
  transform: translateZ(calc(var(--i) * 60px + 10px));
}

.scd-22__tower:focus-visible {
  outline: 3px solid oklch(0.7 0.12 240);
  outline-offset: 26px;
  border-radius: 8px;
}

@media (prefers-reduced-motion: reduce) {
  .scd-22__floor,
    .scd-22__tower {
    transition: none;
  }
}
```

## JavaScript
```js
/* No JavaScript — a steep shared isometric rotation plus per-floor translateZ builds the tower; :hover widens the gaps to separate the floors. */
```

How this works

A perspective scene holds a preserve-3d column. Each 'floor' is a card rotated to a steep isometric angle and stacked with a per-floor translateY+translateZ, plus an extruded side via a pseudo-element so the block gains real thickness. Progressive shading from top to bottom sells the height.

On :hover/:focus-within the vertical gaps widen so the floors separate for inspection, then settle back. Transform-only, GPU-friendly, and purely decorative — it degrades to a flat card list.

Make it yours

  • Change the tower angle via the shared rotation.
  • Set floor spacing through the per-floor translate.
  • Thicken floors with the extrusion pseudo-element.
  • Recolour the gradient from base to roof.

Gotchas — read before shipping

  • perspective on the parent; preserve-3d on the column.
  • Order floors back-to-front so overlaps paint correctly.
  • Give the scene vertical room so the tower isn't clipped.

Browser support

ChromeSafariFirefoxEdge
111+15.4+113+111+

Floor set by oklch() as this demo is written. The core technique itself goes back further — Chrome 36+.

3D transforms + preserve-3d; supported across modern browsers. Decorative — degrades gracefully.

Techniques used in this demo

3D transforms (perspective + preserve-3d)tabindexMDN ↗radial-gradient()MDN ↗oklch()MDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →