10 CSS Feature Sections 08 / 10

CSS Feature Section 3D Perspective Cards

A deep-black 6-card feature section where each card tilts in 3D on mousemove via `rotateX/rotateY`.

CSS + JS MIT licensed
Live Demo Open in tab
Open in playground

The code

<section class="fs08">
  <div class="fs08__inner">
    <div class="fs08__header">
      <div class="fs08__chip"><span class="fs08__chip-line"></span> Core platform <span class="fs08__chip-line"></span></div>
      <h2 class="fs08__h2">Six pillars of a<br><span>faster product</span></h2>
      <p class="fs08__sub">Each capability was built to remove a specific category of friction. Together they compound into something much harder to replicate.</p>
    </div>

    <div class="fs08__grid" id="fs08grid">
      <div class="fs08__card">
        <div class="fs08__card-glow"></div>
        <div class="fs08__card-num">01</div>
        <span class="fs08__icon">🚀</span>
        <div class="fs08__card-title">Instant Previews</div>
        <div class="fs08__card-body">Every branch gets a shareable URL the moment you push. Stakeholders review in production-identical environments, not screenshots.</div>
        <div class="fs08__card-footer">
          <div>
            <div class="fs08__card-metric">&lt;8s</div>
            <div class="fs08__card-metric-lbl">Preview spin-up</div>
          </div>
          <div class="fs08__arrow">→</div>
        </div>
      </div>

      <div class="fs08__card">
        <div class="fs08__card-glow"></div>
        <div class="fs08__card-num">02</div>
        <span class="fs08__icon">🧩</span>
        <div class="fs08__card-title">Component Library</div>
        <div class="fs08__card-body">A living design system that syncs directly with your code. Designers and developers always reference the same source of truth.</div>
        <div class="fs08__card-footer">
          <div>
            <div class="fs08__card-metric">400+</div>
            <div class="fs08__card-metric-lbl">Base components</div>
          </div>
          <div class="fs08__arrow">→</div>
        </div>
      </div>

      <div class="fs08__card">
        <div class="fs08__card-glow"></div>
        <div class="fs08__card-num">03</div>
        <span class="fs08__icon">♻️</span>
        <div class="fs08__card-title">Zero-Waste CI</div>
        <div class="fs08__card-body">Only re-run tests and builds for code that actually changed. Granular caching cuts your CI spend by up to 70% from day one.</div>
        <div class="fs08__card-footer">
          <div>
            <div class="fs08__card-metric">70%</div>
            <div class="fs08__card-metric-lbl">CI cost reduction</div>
          </div>
          <div class="fs08__arrow">→</div>
        </div>
      </div>

      <div class="fs08__card">
        <div class="fs08__card-glow"></div>
        <div class="fs08__card-num">04</div>
        <span class="fs08__icon">🔮</span>
        <div class="fs08__card-title">Predictive Scaling</div>
        <div class="fs08__card-body">ML-forecasted traffic patterns scale your infra before demand spikes hit — not in response to them. Goodbye cold-start latency.</div>
        <div class="fs08__card-footer">
          <div>
            <div class="fs08__card-metric">0ms</div>
            <div class="fs08__card-metric-lbl">Cold starts</div>
          </div>
          <div class="fs08__arrow">→</div>
        </div>
      </div>

      <div class="fs08__card">
        <div class="fs08__card-glow"></div>
        <div class="fs08__card-num">05</div>
        <span class="fs08__icon">🗂️</span>
        <div class="fs08__card-title">Unified Observability</div>
        <div class="fs08__card-body">Traces, metrics, and logs correlated in a single view. Follow a user request from client to database with one click — no tab-switching.</div>
        <div class="fs08__card-footer">
          <div>
            <div class="fs08__card-metric">1 view</div>
            <div class="fs08__card-metric-lbl">Full-stack trace</div>
          </div>
          <div class="fs08__arrow">→</div>
        </div>
      </div>

      <div class="fs08__card">
        <div class="fs08__card-glow"></div>
        <div class="fs08__card-num">06</div>
        <span class="fs08__icon">🔑</span>
        <div class="fs08__card-title">Secrets Management</div>
        <div class="fs08__card-body">Environment variables scoped by branch, team, and service. Rotation policies, leak detection, and audit trails built in, not bolted on.</div>
        <div class="fs08__card-footer">
          <div>
            <div class="fs08__card-metric">0 leaks</div>
            <div class="fs08__card-metric-lbl">Guaranteed</div>
          </div>
          <div class="fs08__arrow">→</div>
        </div>
      </div>
    </div>
  </div>
</section>
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

.fs08 {
  font-family: 'Outfit', sans-serif;
  background: #08080f;
  color: #f0eeff;
  padding: 100px 24px;
  overflow: hidden;
  min-height: 100vh;
}

.fs08__inner { max-width: 1060px; margin: 0 auto; }

.fs08__header { text-align: center; margin-bottom: 72px; }

.fs08__chip {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #a78bfa;
  margin-bottom: 20px;
}

.fs08__chip-line { width: 24px; height: 1px; background: #a78bfa; }

.fs08__h2 {
  font-size: clamp(36px, 5vw, 64px);
  font-weight: 800;
  letter-spacing: -0.025em;
  line-height: 1.07;
  margin-bottom: 18px;
}

.fs08__h2 span {
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(167,139,250,0.6);
}

.fs08__sub {
  font-size: 17px;
  color: rgba(240,238,255,0.45);
  max-width: 480px;
  margin: 0 auto;
  line-height: 1.65;
}

/* 3D card grid */
.fs08__grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 20px;
  perspective: 1200px;
}

.fs08__card {
  position: relative;
  border-radius: 20px;
  padding: 36px 28px;
  overflow: hidden;
  cursor: pointer;
  transition: transform 0.4s cubic-bezier(.23,1,.32,1), box-shadow 0.4s;
  transform-style: preserve-3d;
  background: #12121e;
  border: 1px solid rgba(255,255,255,0.07);
}

.fs08__card:hover {
  box-shadow: 0 32px 80px rgba(0,0,0,0.5);
}

/* Color stripe on top */
.fs08__card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  border-radius: 20px 20px 0 0;
}

.fs08__card:nth-child(1)::before { background: linear-gradient(90deg, #7c3aed, #a78bfa); }
.fs08__card:nth-child(2)::before { background: linear-gradient(90deg, #db2777, #f9a8d4); }
.fs08__card:nth-child(3)::before { background: linear-gradient(90deg, #059669, #6ee7b7); }
.fs08__card:nth-child(4)::before { background: linear-gradient(90deg, #d97706, #fde68a); }
.fs08__card:nth-child(5)::before { background: linear-gradient(90deg, #0284c7, #7dd3fc); }
.fs08__card:nth-child(6)::before { background: linear-gradient(90deg, #be123c, #fda4af); }

/* Glow behind card content */
.fs08__card-glow {
  position: absolute;
  width: 200px; height: 200px;
  border-radius: 50%;
  filter: blur(60px);
  bottom: -80px; right: -60px;
  opacity: 0.2;
  transition: opacity 0.4s;
  pointer-events: none;
}

.fs08__card:hover .fs08__card-glow { opacity: 0.4; }

.fs08__card:nth-child(1) .fs08__card-glow { background: #7c3aed; }
.fs08__card:nth-child(2) .fs08__card-glow { background: #db2777; }
.fs08__card:nth-child(3) .fs08__card-glow { background: #059669; }
.fs08__card:nth-child(4) .fs08__card-glow { background: #d97706; }
.fs08__card:nth-child(5) .fs08__card-glow { background: #0284c7; }
.fs08__card:nth-child(6) .fs08__card-glow { background: #be123c; }

.fs08__card-num {
  font-size: 48px;
  font-weight: 800;
  opacity: 0.06;
  position: absolute;
  top: 16px; right: 20px;
  line-height: 1;
  pointer-events: none;
  user-select: none;
}

.fs08__icon {
  font-size: 30px;
  margin-bottom: 20px;
  display: block;
  position: relative;
  z-index: 1;
}

.fs08__card-title {
  font-size: 20px;
  font-weight: 800;
  margin-bottom: 12px;
  color: #fff;
  letter-spacing: -0.01em;
  position: relative;
  z-index: 1;
}

.fs08__card-body {
  font-size: 14px;
  line-height: 1.65;
  color: rgba(240,238,255,0.5);
  position: relative;
  z-index: 1;
}

.fs08__card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 24px;
  position: relative;
  z-index: 1;
}

.fs08__card-metric {
  font-size: 22px;
  font-weight: 800;
}

.fs08__card:nth-child(1) .fs08__card-metric { color: #a78bfa; }
.fs08__card:nth-child(2) .fs08__card-metric { color: #f9a8d4; }
.fs08__card:nth-child(3) .fs08__card-metric { color: #6ee7b7; }
.fs08__card:nth-child(4) .fs08__card-metric { color: #fde68a; }
.fs08__card:nth-child(5) .fs08__card-metric { color: #7dd3fc; }
.fs08__card:nth-child(6) .fs08__card-metric { color: #fda4af; }

.fs08__card-metric-lbl {
  font-size: 11px;
  color: rgba(240,238,255,0.3);
  margin-top: 2px;
}

.fs08__arrow {
  width: 32px; height: 32px;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,0.12);
  display: flex; align-items: center; justify-content: center;
  font-size: 14px;
  color: rgba(255,255,255,0.4);
  transition: border-color 0.2s, color 0.2s;
}

.fs08__card:hover .fs08__arrow {
  border-color: rgba(255,255,255,0.3);
  color: #fff;
}

@media (max-width: 768px) {
  .fs08__grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 500px) {
  .fs08__grid { grid-template-columns: 1fr; }
}

@media (prefers-reduced-motion: reduce) {
  .fs08__card { transition: none; }
}
// 3D tilt on hover
const cards = document.querySelectorAll('.fs08__card');
cards.forEach(card => {
  card.addEventListener('mousemove', e => {
    const rect = card.getBoundingClientRect();
    const x = (e.clientX - rect.left) / rect.width - 0.5;
    const y = (e.clientY - rect.top) / rect.height - 0.5;
    card.style.transform = `perspective(800px) rotateY(${x * 12}deg) rotateX(${-y * 10}deg) translateZ(10px)`;
  });
  card.addEventListener('mouseleave', () => {
    card.style.transform = '';
  });
});

More from 10 CSS Feature Sections

CSS Feature Section Dark GlassmorphismCSS Feature Section with Code PreviewCSS Feature Comparison SectionCSS SaaS Features Section 2025CSS Feature Section with Floating MockupCSS Animated Feature Cards Scroll RevealCSS Feature Section Timeline LayoutCSS Feature Section with Icon GridCSS Bento Grid Features Layout
View the full collection →

Search CodeFronts

Loading…

↑↓ navigate ↵ select esc close Open full search page →