3D Card Entrances
Four rows of cards that rotate, flip, and burst in from 3D space on scroll, then respond to live mouse tilt.
3D Card Entrances the 6th of 12 designs in the 12 CSS Scroll Animations collection. The design pairs CSS styling with a small amount of JavaScript for interactivity. Copy the HTML, CSS and JavaScript panels below into your project — the JS is self-contained, has zero dependencies, and is safe to drop into any framework (React, Vue, Svelte, plain HTML). The design honours prefers-reduced-motion and uses real semantic markup, so it ships accessibility-ready out of the box.
Live preview
This is a full-page demo — interact inside the frame above, or open it in the playground for the full-screen experience.
The code
<!-- 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> *,*::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';
});
});