36 CSS Stacked Cards
31 / 36

All 36 in 36 CSS Stacked Cards

  1. 01Scroll-Driven Scaling Stack
  2. 02Horizontal Swiper Deck (Tinder-style)
  3. 03Glassmorphic Floating Testimonial Stack
  4. 04Stacked Expansion Accordion
  5. 05Interactive Fan-Out Photo Stack
  6. 063D Perspective Hover Tilt Stack
  7. 07Progressive Disclosure Step Stack
  8. 08Dynamic Tabbed Stack Deck
  9. 09Swipeable / Click-to-Front Stacked Cards
  10. 10Classic Deck
  11. 11Fan Spread
  12. 12Tilted Polaroids
  13. 13Staircase Bricks
  14. 14Hover Spread
  15. 15Cascade Lift
  16. 16Accordion Spread
  17. 17Shuffle Reveal
  18. 18Tab Stack
  19. 19Photos Pinch
  20. 20Swipe Stack
  21. 21Accordion Card
  22. 22Isometric Tower
  23. 233D Flip Stack
  24. 24Tilt on Hover
  25. 25Notification Pile
  26. 26Receipt Roll
  27. 27Scratch Cards
  28. 28CSS Stacked Cards Hover Reveal
  29. 29Scroll-Activated Stacked Cards (Sticky Stack)
  30. 30Pure CSS Stacked Card Testimonial Slider
  31. 313D Overlapping Stacked Cards (Isometric View)
  32. 32Minimalist Bento Grid Stacked Cards
  33. 33Perspective Deck
  34. 34Peel Back
  35. 35Timeline Stack
  36. 36Spiral Tower
Pure CSSMIT licensed

3D Overlapping Stacked Cards (Isometric View)

Three pricing tiers floated in a true isometric plane using perspective, rotateX, and rotateZ, each lifted on its own translateZ layer. Hover eases the tilt and slides the upper tiers apart so all three prices stay readable. Suited to SaaS pricing pages, product mockups, and high-tech feature highlights.

Live Demo
Plain CSSTailwind v4
Try it

Build UI like this from scratch: Flexbox, Grid, animations & responsive CSS

ZTM · The CSS Bootcamp · 30‑day money-back guarantee · Affiliate link

10% off at checkout with code
Check ZTM Course

The code

<div class="scd-31">
  <div class="scd-31__stage">
    <div class="scd-31__stack">
      <div class="scd-31__plane scd-31__plane--p3"><span class="scd-31__tier">SCALE</span><span class="scd-31__feat">Unlimited seats &middot; SSO &middot; SLA</span><span class="scd-31__price">$79<small>/mo</small></span></div>
      <div class="scd-31__plane scd-31__plane--p2"><span class="scd-31__tier">GROWTH</span><span class="scd-31__feat">10 seats &middot; analytics &middot; API</span><span class="scd-31__price">$29<small>/mo</small></span></div>
      <div class="scd-31__plane scd-31__plane--p1"><span class="scd-31__tier">STARTER</span><span class="scd-31__feat">1 seat &middot; core features</span><span class="scd-31__price">$9<small>/mo</small></span></div>
    </div>
    <span class="scd-31__hint">HOVER TO COMPARE PLANS</span>
  </div>
</div>
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=DM+Mono:wght@400&display=swap');

.scd-31,
.scd-31 *,
.scd-31 *::before,
.scd-31 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.scd-31 {
  width: 100%;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 30%,#191d2e,#0a0c14);
  font-family: 'DM Mono', monospace;
}

.scd-31__stage {
  perspective: 1400px;
  width: 340px;
  height: 420px;
  position: relative;
}

.scd-31__stack {
  position: relative;
  width: 100%;
  height: 100%;
  transform: rotateX(52deg) rotateZ(-34deg);
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.3,.9,.3,1);
}

.scd-31__stage:hover .scd-31__stack {
  transform: rotateX(46deg) rotateZ(-28deg);
}

.scd-31__plane {
  position: absolute;
  left: 50px;
  top: 120px;
  width: 240px;
  height: 150px;
  border-radius: 18px;
  padding: 22px;
  transform-style: preserve-3d;
  box-shadow: 0 36px 60px rgba(0,0,0,.55);
  transition: transform .65s cubic-bezier(.3,.9,.3,1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.scd-31__tier {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .04em;
}

.scd-31__feat {
  font-size: .72rem;
  opacity: .85;
  line-height: 1.6;
}

.scd-31__price {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
}

.scd-31__price small {
  font-size: .85rem;
  opacity: .7;
}

.scd-31__plane--p1 {
  background: linear-gradient(135deg,#3a4cf0,#6d7cff);
  color: #fff;
}

.scd-31__plane--p2 {
  background: linear-gradient(135deg,#f0466b,#ff7aa0);
  color: #fff;
}

.scd-31__plane--p3 {
  background: linear-gradient(135deg,#11b894,#46f0c4);
  color: #03241c;
}

.scd-31__plane--p3 {
  transform: translateZ(12px) translate(0,0);
}

.scd-31__plane--p2 {
  transform: translateZ(24px) translate(0,0);
}

.scd-31__plane--p1 {
  transform: translateZ(36px) translate(0,0);
}

.scd-31__stage:hover .scd-31__plane--p1 {
  transform: translateZ(36px) translate(-150px,-150px);
}

.scd-31__stage:hover .scd-31__plane--p2 {
  transform: translateZ(24px) translate(0,0);
}

.scd-31__stage:hover .scd-31__plane--p3 {
  transform: translateZ(12px) translate(150px,150px);
}

.scd-31__hint {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  color: #5b6480;
  font-size: .72rem;
  letter-spacing: .18em;
  transition: opacity .4s;
}

.scd-31__stage:hover .scd-31__hint {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .scd-31__stack,
    .scd-31__plane,
    .scd-31__hint {
    transition: none !important;
  }
}
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: 3D Overlapping Stacked Cards (Isometric View)
Source: https://codefronts.com/components/css-stacked-cards/3d-overlapping-stacked-cards-isometric-view/

Three pricing tiers floated in a true isometric plane using perspective, rotateX, and rotateZ, each lifted on its own translateZ layer. Hover eases the tilt and slides the upper tiers apart so all three prices stay readable. Suited to SaaS pricing pages, product mockups, and high-tech feature highlights.
## HTML
```html
<div class="scd-31">
  <div class="scd-31__stage">
    <div class="scd-31__stack">
      <div class="scd-31__plane scd-31__plane--p3"><span class="scd-31__tier">SCALE</span><span class="scd-31__feat">Unlimited seats &middot; SSO &middot; SLA</span><span class="scd-31__price">$79<small>/mo</small></span></div>
      <div class="scd-31__plane scd-31__plane--p2"><span class="scd-31__tier">GROWTH</span><span class="scd-31__feat">10 seats &middot; analytics &middot; API</span><span class="scd-31__price">$29<small>/mo</small></span></div>
      <div class="scd-31__plane scd-31__plane--p1"><span class="scd-31__tier">STARTER</span><span class="scd-31__feat">1 seat &middot; core features</span><span class="scd-31__price">$9<small>/mo</small></span></div>
    </div>
    <span class="scd-31__hint">HOVER TO COMPARE PLANS</span>
  </div>
</div>
```
## CSS
```css
@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=DM+Mono:wght@400&display=swap');

.scd-31,
.scd-31 *,
.scd-31 *::before,
.scd-31 *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

.scd-31 {
  width: 100%;
  min-height: 100vh;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 30%,#191d2e,#0a0c14);
  font-family: 'DM Mono', monospace;
}

.scd-31__stage {
  perspective: 1400px;
  width: 340px;
  height: 420px;
  position: relative;
}

.scd-31__stack {
  position: relative;
  width: 100%;
  height: 100%;
  transform: rotateX(52deg) rotateZ(-34deg);
  transform-style: preserve-3d;
  transition: transform .7s cubic-bezier(.3,.9,.3,1);
}

.scd-31__stage:hover .scd-31__stack {
  transform: rotateX(46deg) rotateZ(-28deg);
}

.scd-31__plane {
  position: absolute;
  left: 50px;
  top: 120px;
  width: 240px;
  height: 150px;
  border-radius: 18px;
  padding: 22px;
  transform-style: preserve-3d;
  box-shadow: 0 36px 60px rgba(0,0,0,.55);
  transition: transform .65s cubic-bezier(.3,.9,.3,1);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.scd-31__tier {
  font-family: 'Space Grotesk', sans-serif;
  font-weight: 700;
  font-size: 1.15rem;
  letter-spacing: .04em;
}

.scd-31__feat {
  font-size: .72rem;
  opacity: .85;
  line-height: 1.6;
}

.scd-31__price {
  font-family: 'Space Grotesk', sans-serif;
  font-size: 2.1rem;
  font-weight: 700;
  line-height: 1;
}

.scd-31__price small {
  font-size: .85rem;
  opacity: .7;
}

.scd-31__plane--p1 {
  background: linear-gradient(135deg,#3a4cf0,#6d7cff);
  color: #fff;
}

.scd-31__plane--p2 {
  background: linear-gradient(135deg,#f0466b,#ff7aa0);
  color: #fff;
}

.scd-31__plane--p3 {
  background: linear-gradient(135deg,#11b894,#46f0c4);
  color: #03241c;
}

.scd-31__plane--p3 {
  transform: translateZ(12px) translate(0,0);
}

.scd-31__plane--p2 {
  transform: translateZ(24px) translate(0,0);
}

.scd-31__plane--p1 {
  transform: translateZ(36px) translate(0,0);
}

.scd-31__stage:hover .scd-31__plane--p1 {
  transform: translateZ(36px) translate(-150px,-150px);
}

.scd-31__stage:hover .scd-31__plane--p2 {
  transform: translateZ(24px) translate(0,0);
}

.scd-31__stage:hover .scd-31__plane--p3 {
  transform: translateZ(12px) translate(150px,150px);
}

.scd-31__hint {
  position: absolute;
  bottom: 10px;
  left: 50%;
  transform: translateX(-50%);
  color: #5b6480;
  font-size: .72rem;
  letter-spacing: .18em;
  transition: opacity .4s;
}

.scd-31__stage:hover .scd-31__hint {
  opacity: 0;
}

@media (prefers-reduced-motion: reduce) {
  .scd-31__stack,
    .scd-31__plane,
    .scd-31__hint {
    transition: none !important;
  }
}
```

How this works

Three pricing tier cards floated in an isometric plane. The parent gets perspective:1200px. Each card sets transform:rotateX(60deg) rotateZ(-45deg) translateZ(N*20px) where N is the card's stack index — the rotations produce the isometric tilt, and the translateZ lifts each card physically forward in 3D space.

Each card's own content stays flat within its 3D-rotated plane thanks to transform-style:preserve-3d on the parent. Hover eases the rotation toward a milder angle (rotateX(30deg) rotateZ(-25deg)) and slides the upper tiers apart via translateX, revealing all three prices simultaneously.

Zero JavaScript. The whole isometric pattern is CSS transforms + preserve-3d.

Make it yours

  • Rebrand each pricing tier's gradient from --tier-basic, --tier-pro, --tier-enterprise.
  • Change the isometric angle via the rotateX/rotateZ values — 60/-45 is classic isometric; softer angles (45/-30) feel more approachable.
  • Adjust hover reveal spread via the translateX distance in the hover state.
  • Add a &ldquo;Most Popular&rdquo; badge on the middle tier via a positioned ribbon element.
  • Tune the depth stack via translateZ spacing — larger gaps read as more separation; smaller as tighter pile.

Gotchas — read before shipping

  • perspective must live on the PARENT — perspective on the tilting card itself flattens the 3D rotation into a 2D skew.
  • transform-style:preserve-3d is required for children to render in 3D space; without it, they flatten onto the parent's plane.
  • The isometric tilt reduces text contrast — ensure the base card text still hits 4.5:1 contrast on its intended background, not on the rotated projection.
  • For accessibility, provide a fallback layout at @media (prefers-reduced-motion:reduce) — either flatten to rotateX(0) rotateZ(0) or use a simple vertical stack.
  • Pricing cards must show actual prices at rest — don't require hover to reveal them, or mobile users lose the primary information.

Browser support

ChromeSafariFirefoxEdge
36+9+16+36+

CSS 3D transforms, preserve-3d, and perspective are universally supported. No prefixes needed.

Techniques used in this demo

3D transforms (perspective + preserve-3d)MDN ↗radial-gradient()MDN ↗place-items / place-contentMDN ↗box-shadowMDN ↗

Search CodeFronts

Loading…

↑↓ navigate↵ selectesc closeOpen full search page →