3D Card Entrances — Live CSS Playground

{CF} CodeFronts Back to CSS Scroll Animations 3D Card Entrances CSS + JS

HTML

<!-- Wave A -->
<section class="section">
  <div class="wave-tag">01 — Y-axis rotation</div>
  <div class="grid wa">
    <div class="card">
      <div class="icon" style="background:#EEF2FF">⚡</div>
      <div class="name">Turbine Analytics</div>
      <div class="desc">Real-time processing at massive scale, built for teams moving fast without breaking trust.</div>
      <div class="foot"><span class="badge" style="background:#EEF2FF;color:#6366F1">Infrastructure</span><span class="arr">→</span></div>
    </div>
    <div class="card">
      <div class="icon" style="background:#F0FDF4">🌱</div>
      <div class="name">Grove CMS</div>
      <div class="desc">Content management reimagined for editorial teams who think in systems, not pages.</div>
      <div class="foot"><span class="badge" style="background:#F0FDF4;color:#16A34A">Platform</span><span class="arr">→</span></div>
    </div>
    <div class="card">
      <div class="icon" style="background:#FFF7ED">🧭</div>
      <div class="name">Meridian Maps</div>
      <div class="desc">Geospatial intelligence for logistics, urban planning, and field operations at any scale.</div>
      <div class="foot"><span class="badge" style="background:#FFF7ED;color:#EA580C">Geo</span><span class="arr">→</span></div>
    </div>
  </div>
</section>

<!-- Wave B -->
<section class="section">
  <div class="wave-tag">02 — Compound diagonal</div>
  <div class="grid wb">
    <div class="card">
      <div class="icon" style="background:#FDF4FF">🔐</div>
      <div class="name">Vault Security</div>
      <div class="desc">Zero-knowledge auth and encryption middleware for developer-first security stacks.</div>
      <div class="foot"><span class="badge" style="background:#FDF4FF;color:#A21CAF">Security</span><span class="arr">→</span></div>
    </div>
    <div class="card">
      <div class="icon" style="background:#FFF1F2">📡</div>
      <div class="name">Signal Comms</div>
      <div class="desc">Unified messaging across channels. One API for email, push, SMS, and webhooks globally.</div>
      <div class="foot"><span class="badge" style="background:#FFF1F2;color:#E11D48">Comms</span><span class="arr">→</span></div>
    </div>
    <div class="card">
      <div class="icon" style="background:#F0F9FF">🧩</div>
      <div class="name">Mosaic UI</div>
      <div class="desc">Component library tuned for enterprise design systems. Dark mode native, accessible first.</div>
      <div class="foot"><span class="badge" style="background:#F0F9FF;color:#0284C7">Design</span><span class="arr">→</span></div>
    </div>
  </div>
</section>

<!-- Wave C -->
<section class="section">
  <div class="wave-tag">03 — Flip entry</div>
  <div class="grid wc">
    <div class="card">
      <div class="icon" style="background:#FFF8F1">🚀</div>
      <div class="name">Launch Ops</div>
      <div class="desc">Ship faster with automated deployment pipelines, rollback controls, and real-time observability.</div>
      <div class="foot"><span class="badge" style="background:#FFF8F1;color:#D97706">DevOps</span><span class="arr">→</span></div>
    </div>
    <div class="card">
      <div class="icon" style="background:#F0FFF4">🌐</div>
      <div class="name">Nexus CDN</div>
      <div class="desc">Global edge delivery with sub-20ms latency. Smart caching, compression, and DDoS protection.</div>
      <div class="foot"><span class="badge" style="background:#F0FFF4;color:#059669">Network</span><span class="arr">→</span></div>
    </div>
    <div class="card">
      <div class="icon" style="background:#FAF0FE">📊</div>
      <div class="name">Prism Reports</div>
      <div class="desc">Scheduled and live reporting for finance, ops, and executive teams. Export-ready outputs.</div>
      <div class="foot"><span class="badge" style="background:#FAF0FE;color:#7C3AED">Analytics</span><span class="arr">→</span></div>
    </div>
  </div>
</section>

<!-- Wave D -->
<section class="section">
  <div class="wave-tag">04 — Z-depth burst</div>
  <div class="grid wd">
    <div class="card">
      <div class="icon" style="background:#FFF9F0">🤖</div>
      <div class="name">Aria AI</div>
      <div class="desc">Embedded AI assistant for any workflow. Train on your data, deploy in hours, iterate endlessly.</div>
      <div class="foot"><span class="badge" style="background:#FFF9F0;color:#B45309">AI</span><span class="arr">→</span></div>
    </div>
    <div class="card">
      <div class="icon" style="background:#F0F7FF">🔗</div>
      <div class="name">Bridge APIs</div>
      <div class="desc">Unified API gateway with rate limiting, auth, versioning, and auto-generated documentation.</div>
      <div class="foot"><span class="badge" style="background:#F0F7FF;color:#1D4ED8">APIs</span><span class="arr">→</span></div>
    </div>
    <div class="card">
      <div class="icon" style="background:#FFF0F3">🛡️</div>
      <div class="name">Shield IAM</div>
      <div class="desc">Identity and access management for multi-cloud environments. RBAC, SSO, and audit trails built-in.</div>
      <div class="foot"><span class="badge" style="background:#FFF0F3;color:#BE123C">IAM</span><span class="arr">→</span></div>
    </div>
  </div>
</section>

CSS

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{background:#F2F0EB;overflow-x:hidden;font-family:'Outfit',sans-serif}

.section{padding:5rem 4vw;position:relative}
.section + .section{border-top:1px solid rgba(0,0,0,0.06)}

/* perspective context on section */
.grid{
  display:grid;grid-template-columns:repeat(3,1fr);
  gap:1.5rem;perspective:1200px;
}

/* card base */
.card{
  background:#fff;border-radius:22px;padding:2.25rem 1.75rem;
  border:1px solid rgba(0,0,0,0.07);
  opacity:0;
  transition:opacity 0.85s ease,transform 0.95s cubic-bezier(0.16,1,0.3,1);
  transform-style:preserve-3d;
  cursor:default;
  will-change:transform;
}
.card.in{opacity:1;transform:none !important}

/* Wave A: rotate in from left/right/top */
.wa .card:nth-child(1){transform:perspective(900px) rotateY(-42deg) translateX(-25px);transition-delay:0s}
.wa .card:nth-child(2){transform:perspective(900px) rotateX(45deg) translateY(35px);transition-delay:0.1s}
.wa .card:nth-child(3){transform:perspective(900px) rotateY(42deg) translateX(25px);transition-delay:0.2s}

/* Wave B: compound diagonal */
.wb .card:nth-child(1){transform:perspective(900px) rotateX(-38deg) rotateZ(-5deg) translateY(-30px);transition-delay:0.05s}
.wb .card:nth-child(2){transform:perspective(900px) rotateY(-20deg) rotateX(30deg) scale(0.82);transition-delay:0.18s}
.wb .card:nth-child(3){transform:perspective(900px) rotateX(-38deg) rotateZ(5deg) translateY(-30px);transition-delay:0.05s}

/* Wave C: flip in */
.wc .card:nth-child(1){transform:perspective(900px) rotateY(90deg) translateX(-40px);transition-delay:0s}
.wc .card:nth-child(2){transform:perspective(900px) rotateY(-90deg);transition-delay:0.15s}
.wc .card:nth-child(3){transform:perspective(900px) rotateX(-90deg) translateY(-30px);transition-delay:0.05s}

/* Wave D: z-depth burst */
.wd .card:nth-child(1){transform:perspective(900px) translateZ(-200px) rotate(-8deg);transition-delay:0.1s}
.wd .card:nth-child(2){transform:perspective(900px) translateZ(-300px) scale(0.7);transition-delay:0s}
.wd .card:nth-child(3){transform:perspective(900px) translateZ(-200px) rotate(8deg);transition-delay:0.1s}

/* card internals */
.icon{
  width:46px;height:46px;border-radius:12px;
  margin-bottom:1.5rem;
  display:flex;align-items:center;justify-content:center;font-size:22px;
}
.name{
  font-family:'Syne',sans-serif;font-weight:700;
  font-size:17px;color:#111;margin-bottom:0.5rem;
}
.desc{font-size:13px;line-height:1.65;color:#9CA3AF}
.foot{
  margin-top:1.75rem;padding-top:1.1rem;
  border-top:1px solid rgba(0,0,0,0.06);
  display:flex;align-items:center;justify-content:space-between;
}
.badge{
  font-family:'Space Mono',monospace;font-size:10px;
  letter-spacing:0.08em;text-transform:uppercase;
  padding:4px 10px;border-radius:20px;
}
.arr{font-size:16px;color:#D1D5DB;transition:color 0.2s,transform 0.2s}
.card:hover .arr{color:#111;transform:translateX(5px)}

/* subtle shine on hover */
.card::after{
  content:'';
  position:absolute;inset:0;border-radius:22px;
  background:radial-gradient(circle at var(--mx,50%) var(--my,50%),rgba(255,255,255,0.12),transparent 60%);
  opacity:0;transition:opacity 0.3s;pointer-events:none;
}
.card:hover::after{opacity:1}

/* alternating section backgrounds */
.section:nth-child(even){background:#F8F7F2}
.section:nth-child(odd){background:#EEECE6}

/* wave labels */
.wave-tag{
  font-family:'Space Mono',monospace;font-size:10px;
  letter-spacing:0.15em;text-transform:uppercase;
  color:rgba(0,0,0,0.2);margin-bottom:2rem;
}

// scroll reveal
const io = new IntersectionObserver(entries=>{
  entries.forEach(e=>{
    if(!e.isIntersecting)return;
    e.target.classList.add('in');
  });
},{threshold:0.18});
document.querySelectorAll('.card').forEach(el=>io.observe(el));

// mouse tilt per card (runs after .in is set)
document.querySelectorAll('.card').forEach(card=>{
  card.addEventListener('mousemove',e=>{
    if(!card.classList.contains('in'))return;
    const rect=card.getBoundingClientRect();
    const cx=rect.left+rect.width/2;
    const cy=rect.top+rect.height/2;
    const dx=(e.clientX-cx)/(rect.width/2);
    const dy=(e.clientY-cy)/(rect.height/2);
    const tilt=10;
    card.style.transform=`perspective(900px) rotateY(${dx*tilt}deg) rotateX(${-dy*tilt}deg) scale(1.025)`;
    card.style.setProperty('--mx',(((e.clientX-rect.left)/rect.width)*100)+'%');
    card.style.setProperty('--my',(((e.clientY-rect.top)/rect.height)*100)+'%');
    card.style.transition='transform 0.1s ease,opacity 0.85s ease';
  });
  card.addEventListener('mouseleave',()=>{
    if(!card.classList.contains('in'))return;
    card.style.transform='perspective(900px) rotateY(0deg) rotateX(0deg) scale(1)';
    card.style.transition='transform 0.6s cubic-bezier(0.16,1,0.3,1),opacity 0.85s ease';
  });
});