3D Card Stack — Playground

{CF} CodeFronts Back to CSS Hero Sections 3D Card Stack Pure CSS

Edit any tab — preview updates live

.hs-3d {
  width: 100%;
  min-height: clamp(220px, 30vh, 100vh);
  padding: clamp(20px, 4vh, 60px) clamp(16px, 4vw, 40px);
  background: radial-gradient(50% 50% at 80% 30%, rgba(124,108,255,0.18), transparent 70%), #0e0e16;
  display: grid; grid-template-columns: 1fr 1fr;
  gap: clamp(12px, 3vw, 32px); align-items: center;
  font-family: system-ui, sans-serif; color: #f0eeff;
  perspective: 1000px;
}
@media (max-width: 720px) { .hs-3d { grid-template-columns: 1fr; } }
.hs-3d-tag {
  display: inline-block;
  font-family: monospace; font-size: clamp(9px, 1.3vw, 11px);
  letter-spacing: 0.12em; color: #a78bfa; text-transform: uppercase;
  padding: 3px 10px; border-radius: 12px;
  background: rgba(124,108,255,0.12); border: 1px solid rgba(124,108,255,0.3);
}
.hs-3d-l h1 {
  margin: 10px 0; font-size: clamp(20px, 4.5vw, 44px);
  font-weight: 800; line-height: 1.1; letter-spacing: -0.02em;
}
.hs-3d-l p { margin: 0 0 12px; font-size: clamp(11px, 1.5vw, 15px); color: #b8b6d4; }
.hs-3d-cta {
  display: inline-block; padding: 9px 20px; border-radius: 7px;
  background: linear-gradient(135deg, #7c6cff, #a78bfa); color: #fff;
  font-size: clamp(11px, 1.5vw, 14px); font-weight: 700;
  text-decoration: none; transition: filter 0.15s;
}
.hs-3d-cta:hover { filter: brightness(1.12); }
.hs-3d-stage {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  min-height: 200px;
  transform-style: preserve-3d;
}
.hs-3d-card {
  position: absolute;
  width: clamp(110px, 22vw, 150px); aspect-ratio: 4 / 5;
  background: linear-gradient(180deg, #1f1538 0%, #0e0e16 100%);
  border: 1px solid rgba(167,139,250,0.4);
  border-radius: 12px;
  padding: clamp(10px, 2vw, 16px);
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: 0 18px 38px rgba(0,0,0,0.4);
  transition: transform 0.4s cubic-bezier(0.2, 0.9, 0.3, 1);
}
.hs-3d-icon {
  width: clamp(28px, 4vw, 36px); height: clamp(28px, 4vw, 36px);
  display: flex; align-items: center; justify-content: center;
  border-radius: 8px;
  background: linear-gradient(135deg, #7c6cff, #a78bfa); color: #fff;
  font-size: clamp(14px, 2vw, 18px); font-weight: 700;
  margin-bottom: 4px;
}
.hs-3d-card strong { font-size: clamp(12px, 1.6vw, 16px); color: #fff; }
.hs-3d-card span { font-size: clamp(9px, 1.2vw, 11px); color: #b8b6d4; }
.hs-3d-c1 { transform: rotateY(-18deg) translateX(-50%) translateZ(-40px); opacity: 0.85; }
.hs-3d-c2 { transform: rotateY(0deg)   translateX(0)    translateZ(0); z-index: 2; }
.hs-3d-c3 { transform: rotateY(18deg)  translateX(50%)  translateZ(-40px); opacity: 0.85; }
.hs-3d-stage:hover .hs-3d-c1 { transform: rotateY(-22deg) translateX(-65%) translateZ(-20px); opacity: 1; }
.hs-3d-stage:hover .hs-3d-c3 { transform: rotateY(22deg)  translateX(65%)  translateZ(-20px); opacity: 1; }
@media (prefers-reduced-motion: reduce) { .hs-3d-card { transition: none; } }

Live preview Ready