28 CSS Stacked Card Designs 04 / 28

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.

Pure CSS MIT licensed

Live Demo Open in tab

Open in playground

The code

<div class="scd-isop">
  <div class="scd-isop__stage">
    <div class="scd-isop__stack">
      <div class="scd-isop__plane scd-isop__plane--p3"><span class="scd-isop__tier">SCALE</span><span class="scd-isop__feat">Unlimited seats &middot; SSO &middot; SLA</span><span class="scd-isop__price">$79<small>/mo</small></span></div>
      <div class="scd-isop__plane scd-isop__plane--p2"><span class="scd-isop__tier">GROWTH</span><span class="scd-isop__feat">10 seats &middot; analytics &middot; API</span><span class="scd-isop__price">$29<small>/mo</small></span></div>
      <div class="scd-isop__plane scd-isop__plane--p1"><span class="scd-isop__tier">STARTER</span><span class="scd-isop__feat">1 seat &middot; core features</span><span class="scd-isop__price">$9<small>/mo</small></span></div>
    </div>
    <span class="scd-isop__hint">HOVER TO COMPARE PLANS</span>
  </div>
</div>

<div class="scd-isop">
  <div class="scd-isop__stage">
    <div class="scd-isop__stack">
      <div class="scd-isop__plane scd-isop__plane--p3"><span class="scd-isop__tier">SCALE</span><span class="scd-isop__feat">Unlimited seats &middot; SSO &middot; SLA</span><span class="scd-isop__price">$79<small>/mo</small></span></div>
      <div class="scd-isop__plane scd-isop__plane--p2"><span class="scd-isop__tier">GROWTH</span><span class="scd-isop__feat">10 seats &middot; analytics &middot; API</span><span class="scd-isop__price">$29<small>/mo</small></span></div>
      <div class="scd-isop__plane scd-isop__plane--p1"><span class="scd-isop__tier">STARTER</span><span class="scd-isop__feat">1 seat &middot; core features</span><span class="scd-isop__price">$9<small>/mo</small></span></div>
    </div>
    <span class="scd-isop__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-isop, .scd-isop *, .scd-isop *::before, .scd-isop *::after { box-sizing: border-box; margin: 0; padding: 0; }

.scd-isop {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 30%,#191d2e,#0a0c14);
  font-family: 'DM Mono', monospace;
}
.scd-isop__stage { perspective: 1400px; width: 340px; height: 420px; position: relative; }
.scd-isop__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-isop__stage:hover .scd-isop__stack { transform: rotateX(46deg) rotateZ(-28deg); }

.scd-isop__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-isop__tier { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.15rem; letter-spacing: .04em; }
.scd-isop__feat { font-size: .72rem; opacity: .85; line-height: 1.6; }
.scd-isop__price { font-family: 'Space Grotesk', sans-serif; font-size: 2.1rem; font-weight: 700; line-height: 1; }
.scd-isop__price small { font-size: .85rem; opacity: .7; }

.scd-isop__plane--p1 { background: linear-gradient(135deg,#3a4cf0,#6d7cff); color: #fff; }
.scd-isop__plane--p2 { background: linear-gradient(135deg,#f0466b,#ff7aa0); color: #fff; }
.scd-isop__plane--p3 { background: linear-gradient(135deg,#11b894,#46f0c4); color: #03241c; }

.scd-isop__plane--p3 { transform: translateZ(12px) translate(0,0); }
.scd-isop__plane--p2 { transform: translateZ(24px) translate(0,0); }
.scd-isop__plane--p1 { transform: translateZ(36px) translate(0,0); }

.scd-isop__stage:hover .scd-isop__plane--p1 { transform: translateZ(36px) translate(-150px,-150px); }
.scd-isop__stage:hover .scd-isop__plane--p2 { transform: translateZ(24px) translate(0,0); }
.scd-isop__stage:hover .scd-isop__plane--p3 { transform: translateZ(12px) translate(150px,150px); }

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

@media (prefers-reduced-motion: reduce) {
  .scd-isop__stack,
  .scd-isop__plane,
  .scd-isop__hint { transition: none !important; }
}

@import url('https://fonts.googleapis.com/css2?family=Space+Grotesk:wght@500;700&family=DM+Mono:wght@400&display=swap');

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

.scd-isop {
  min-height: 460px;
  display: grid;
  place-items: center;
  background: radial-gradient(circle at 50% 30%,#191d2e,#0a0c14);
  font-family: 'DM Mono', monospace;
}
.scd-isop__stage { perspective: 1400px; width: 340px; height: 420px; position: relative; }
.scd-isop__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-isop__stage:hover .scd-isop__stack { transform: rotateX(46deg) rotateZ(-28deg); }

.scd-isop__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-isop__tier { font-family: 'Space Grotesk', sans-serif; font-weight: 700; font-size: 1.15rem; letter-spacing: .04em; }
.scd-isop__feat { font-size: .72rem; opacity: .85; line-height: 1.6; }
.scd-isop__price { font-family: 'Space Grotesk', sans-serif; font-size: 2.1rem; font-weight: 700; line-height: 1; }
.scd-isop__price small { font-size: .85rem; opacity: .7; }

.scd-isop__plane--p1 { background: linear-gradient(135deg,#3a4cf0,#6d7cff); color: #fff; }
.scd-isop__plane--p2 { background: linear-gradient(135deg,#f0466b,#ff7aa0); color: #fff; }
.scd-isop__plane--p3 { background: linear-gradient(135deg,#11b894,#46f0c4); color: #03241c; }

.scd-isop__plane--p3 { transform: translateZ(12px) translate(0,0); }
.scd-isop__plane--p2 { transform: translateZ(24px) translate(0,0); }
.scd-isop__plane--p1 { transform: translateZ(36px) translate(0,0); }

.scd-isop__stage:hover .scd-isop__plane--p1 { transform: translateZ(36px) translate(-150px,-150px); }
.scd-isop__stage:hover .scd-isop__plane--p2 { transform: translateZ(24px) translate(0,0); }
.scd-isop__stage:hover .scd-isop__plane--p3 { transform: translateZ(12px) translate(150px,150px); }

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

@media (prefers-reduced-motion: reduce) {
  .scd-isop__stack,
  .scd-isop__plane,
  .scd-isop__hint { transition: none !important; }
}

More from 28 CSS Stacked Card Designs

Shuffle Reveal Swipe Stack Accordion Card 3D Flip Stack Tilt on Hover Scratch Cards CSS Stacked Cards Hover Reveal Pure CSS Stacked Card Testimonial Slider Minimalist Bento Grid Stacked Cards Classic Deck Fan Spread Tilted Polaroids

View the full collection →