Perspective layers, parallax cards, floating elements, and spatial UI that pops off the screen.
3D Flip Card
Wireless Speaker
$89
Hover to flip
Quick Actions
Noise Canceller
$129
Hover to flip
Quick Actions
Studio Monitor
$249
Hover to flip
Quick Actions
Product cards that flip on hover using rotateY(180deg) with preserve-3d and backface-visibility hidden.
| 1 | <div "color:#79c0ff">className="flex gap-6" "color:#79c0ff">style={{ perspective: "1000px" }}> |
| 2 | {products.map((item) => ( |
| 3 | <div "color:#79c0ff">key={item.name} "color:#79c0ff">className="group h-56 w-44 cursor-pointer" "color:#79c0ff">style={{ perspective: "1000px" }}> |
| 4 | <div "color:#79c0ff">className="relative h-full w-full transition-all duration-700 [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)]"> |
| 5 | {/* Front */} |
| 6 | <div "color:#79c0ff">className="absolute inset-0 flex flex-col items-center justify-center rounded-2xl bg-gradient-to-br from-violet-500 to-fuchsia-600 p-4 [backface-visibility:hidden]"> |
| 7 | <div "color:#79c0ff">className="h-16 w-16 rounded-xl bg-white/20 backdrop-blur" /> |
| 8 | <p "color:#79c0ff">className="mt-3 text-sm font-bold text-white">{item.name}</p> |
| 9 | <p "color:#79c0ff">className="mt-1 text-lg font-black text-white">{item.price}</p> |
| 10 | <p "color:#79c0ff">className="mt-2 text-[10px] text-white/60">Hover to flip</p> |
| 11 | </div> |
| 12 | {/* Back */} |
| 13 | <div "color:#79c0ff">className="absolute inset-0 flex flex-col items-center justify-center gap-2 rounded-2xl bg-gradient-to-br from-violet-500 to-fuchsia-600 p-4 [backface-visibility:hidden] [transform:rotateY(180deg)]"> |
| 14 | <p "color:#79c0ff">className="text-sm font-semibold text-white">Quick Actions</p> |
| 15 | <button "color:#79c0ff">className="w-full rounded-lg bg-white/20 py-1.5 text-xs font-medium text-white">Add to Cart</button> |
| 16 | <button "color:#79c0ff">className="w-full rounded-lg bg-white/10 py-1.5 text-xs font-medium text-white/80">Wishlist</button> |
| 17 | </div> |
| 18 | </div> |
| 19 | </div> |
| 20 | ))} |
| 21 | </div> |
Vertical Flip Card
Alex Kim
Designer
Hover to flip
Contact
Sam Patel
Engineer
Hover to flip
Contact
Jordan Lee
Product
Hover to flip
Contact
Person cards with vertical rotateX(180deg) flip on hover to reveal contact details.
| 1 | <div "color:#79c0ff">className="group h-52 w-40 cursor-pointer" "color:#79c0ff">style={{ perspective: "1000px" }}> |
| 2 | <div "color:#79c0ff">className="relative h-full w-full transition-all duration-700 [transform-style:preserve-3d] group-hover:[transform:rotateX(180deg)]"> |
| 3 | {/* Front — avatar + name */} |
| 4 | <div "color:#79c0ff">className="absolute inset-0 flex flex-col items-center justify-center rounded-2xl bg-gradient-to-br from-rose-500 to-pink-600 p-4 [backface-visibility:hidden]"> |
| 5 | <div "color:#79c0ff">className="flex h-16 w-16 items-center justify-center rounded-full bg-white/25 text-2xl font-black text-white">AK</div> |
| 6 | <p "color:#79c0ff">className="mt-3 text-sm font-bold text-white">Alex Kim</p> |
| 7 | <p "color:#79c0ff">className="mt-0.5 text-xs text-white/70">Designer</p> |
| 8 | </div> |
| 9 | {/* Back — contact details */} |
| 10 | <div "color:#79c0ff">className="absolute inset-0 flex flex-col items-center justify-center gap-3 rounded-2xl bg-gradient-to-br from-rose-500 to-pink-600 p-4 [backface-visibility:hidden] [transform:rotateX(180deg)]"> |
| 11 | <p "color:#79c0ff">className="text-xs font-bold text-white">Contact</p> |
| 12 | <div "color:#79c0ff">className="w-full rounded-lg bg-white/20 px-2 py-2 text-center text-[11px] text-white">alex@studio.io</div> |
| 13 | <div "color:#79c0ff">className="w-full rounded-lg bg-white/20 px-2 py-2 text-center text-[11px] text-white">+1 555 0101</div> |
| 14 | <button "color:#79c0ff">className="w-full rounded-lg bg-white/30 py-1.5 text-xs font-semibold text-white">Message</button> |
| 15 | </div> |
| 16 | </div> |
| 17 | </div> |
Stats Flip Cards
Revenue
$42K
+18% vs last month
3,241 transactions
Users
18.9K
1,204 new this week
92% retention rate
Uptime
99.9%
Zero incidents today
28ms avg response
Score
4.8★
From 2,400 reviews
Top 1% rated
Small stat cards that flip on hover to reveal detailed metrics.
| 1 | {stats.map((stat) => ( |
| 2 | <div "color:#79c0ff">key={stat.label} "color:#79c0ff">className="group h-32 w-32 cursor-pointer" "color:#79c0ff">style={{ perspective: "800px" }}> |
| 3 | <div "color:#79c0ff">className="relative h-full w-full transition-all duration-600 [transform-style:preserve-3d] group-hover:[transform:rotateY(180deg)]"> |
| 4 | {/* Front */} |
| 5 | <div "color:#79c0ff">className="absolute inset-0 flex flex-col items-center justify-center rounded-2xl bg-gradient-to-br from-violet-500 to-purple-600 shadow-lg [backface-visibility:hidden]"> |
| 6 | <p "color:#79c0ff">className="text-xs font-semibold text-white/70">{stat.label}</p> |
| 7 | <p "color:#79c0ff">className="text-2xl font-black text-white">{stat.value}</p> |
| 8 | </div> |
| 9 | {/* Back */} |
| 10 | <div "color:#79c0ff">className="absolute inset-0 flex flex-col items-center justify-center rounded-2xl bg-gradient-to-br from-violet-500 to-purple-600 p-3 text-center shadow-lg [backface-visibility:hidden] [transform:rotateY(180deg)]"> |
| 11 | <p "color:#79c0ff">className="text-[10px] font-bold text-white">{stat.detail}</p> |
| 12 | <p "color:#79c0ff">className="mt-1 text-[9px] text-white/70">{stat.sub}</p> |
| 13 | </div> |
| 14 | </div> |
| 15 | </div> |
| 16 | ))} |
CSS Tilt Cards
CSS 3D
Forward Tilt
Hover to flatten
CSS 3D
Side Tilt
Hover to flatten
CSS 3D
Corner Tilt
Hover to flatten
Cards with static CSS 3D tilt via rotateX/rotateY. Hover flattens them back to normal.
| 1 | <div "color:#79c0ff">className="flex gap-8 py-6" "color:#79c0ff">style={{ perspective: "900px" }}> |
| 2 | <div |
| 3 | "color:#79c0ff">className="flex h-48 w-40 flex-col justify-end rounded-2xl bg-gradient-to-br from-violet-500 to-fuchsia-600 p-5 shadow-2xl shadow-violet-500/40 transform-gpu transition-transform duration-500 hover:[transform:none]" |
| 4 | "color:#79c0ff">style={{ transform: "rotateX(15deg) rotateY(-12deg)", transformStyle: "preserve-3d" }} |
| 5 | > |
| 6 | <p "color:#79c0ff">className="text-xs font-semibold text-white/70">CSS 3D</p> |
| 7 | <p "color:#79c0ff">className="text-sm font-bold text-white">Forward Tilt</p> |
| 8 | </div> |
| 9 | <div |
| 10 | "color:#79c0ff">className="flex h-48 w-40 flex-col justify-end rounded-2xl bg-gradient-to-br from-cyan-500 to-blue-600 p-5 shadow-2xl shadow-cyan-500/40 transform-gpu transition-transform duration-500 hover:[transform:none]" |
| 11 | "color:#79c0ff">style={{ transform: "rotateX(5deg) rotateY(18deg)", transformStyle: "preserve-3d" }} |
| 12 | > |
| 13 | <p "color:#79c0ff">className="text-xs font-semibold text-white/70">CSS 3D</p> |
| 14 | <p "color:#79c0ff">className="text-sm font-bold text-white">Side Tilt</p> |
| 15 | </div> |
| 16 | </div> |
Tilted Frames
Gradient image frame placeholders with 3D tilt and deep layered box-shadows for depth.
| 1 | <div "color:#79c0ff">className="flex gap-10 py-6" "color:#79c0ff">style={{ perspective: "1000px" }}> |
| 2 | <div |
| 3 | "color:#79c0ff">className="transform-gpu transition-all duration-500 hover:[transform:none]" |
| 4 | "color:#79c0ff">style={{ |
| 5 | transform: "rotateX(10deg) rotateY(-15deg)", |
| 6 | transformStyle: "preserve-3d", |
| 7 | boxShadow: "0 4px 8px rgba(0,0,0,0.2), 0 12px 24px rgba(0,0,0,0.25), 0 32px 64px rgba(0,0,0,0.3), 0 60px 100px rgba(0,0,0,0.2)", |
| 8 | }} |
| 9 | > |
| 10 | <div "color:#79c0ff">className="h-36 w-44 overflow-hidden rounded-xl"> |
| 11 | <div "color:#79c0ff">className="h-full w-full bg-gradient-to-br from-violet-400 via-purple-500 to-fuchsia-600" /> |
| 12 | </div> |
| 13 | <div "color:#79c0ff">className="mt-2 rounded-lg bg-slate-800 px-3 py-1.5 text-center text-xs font-medium text-slate-300"> |
| 14 | Mountain Range |
| 15 | </div> |
| 16 | </div> |
| 17 | </div> |
Device Mockup
Phone-shaped div tilted in 3D perspective using rounded-[2.5rem] border with gradient screen content.
| 1 | <div "color:#79c0ff">className="flex gap-10 py-4" "color:#79c0ff">style={{ perspective: "1000px" }}> |
| 2 | <div |
| 3 | "color:#79c0ff">className="transform-gpu transition-all duration-500 hover:[transform:none]" |
| 4 | "color:#79c0ff">style={{ |
| 5 | transform: "rotateX(10deg) rotateY(-20deg)", |
| 6 | transformStyle: "preserve-3d", |
| 7 | boxShadow: "0 8px 16px rgba(0,0,0,0.3), 0 24px 48px rgba(0,0,0,0.35), 0 60px 80px rgba(0,0,0,0.25)", |
| 8 | }} |
| 9 | > |
| 10 | <div "color:#79c0ff">className="relative flex h-64 w-32 flex-col overflow-hidden rounded-[2.5rem] border-4 border-slate-700 bg-slate-900"> |
| 11 | <div "color:#79c0ff">className="mx-auto mt-2 h-3 w-16 rounded-full bg-slate-700" /> |
| 12 | <div "color:#79c0ff">className="mx-2 mt-2 flex flex-1 flex-col items-center justify-center rounded-2xl bg-gradient-to-br from-violet-600 to-indigo-700 p-3"> |
| 13 | <div "color:#79c0ff">className="h-8 w-8 rounded-full bg-gradient-to-br from-violet-400 to-fuchsia-400 shadow-lg" /> |
| 14 | </div> |
| 15 | <div "color:#79c0ff">className="mb-2 mx-auto h-1 w-12 rounded-full bg-slate-600" /> |
| 16 | </div> |
| 17 | </div> |
| 18 | </div> |
Stacked Cards
Notifications
3 newMessages
7 unreadUpdates
12 itemsThree absolutely-positioned cards offset to create a visible depth stack effect.
| 1 | <div "color:#79c0ff">className="relative h-44 w-52"> |
| 2 | {/* Layer 3 — deepest */} |
| 3 | <div "color:#79c0ff">className="absolute inset-0 translate-x-4 translate-y-4 rounded-2xl bg-gradient-to-br from-violet-500 to-purple-600 opacity-30" /> |
| 4 | {/* Layer 2 */} |
| 5 | <div "color:#79c0ff">className="absolute inset-0 translate-x-2 translate-y-2 rounded-2xl bg-gradient-to-br from-violet-500 to-purple-600 opacity-60" /> |
| 6 | {/* Layer 1 — top */} |
| 7 | <div "color:#79c0ff">className="absolute inset-0 flex flex-col justify-between rounded-2xl bg-gradient-to-br from-violet-500 to-purple-600 p-5 shadow-xl"> |
| 8 | <div "color:#79c0ff">className="flex items-start justify-between"> |
| 9 | <p "color:#79c0ff">className="text-sm font-bold text-white">Notifications</p> |
| 10 | <span "color:#79c0ff">className="rounded-full bg-white/25 px-2 py-0.5 text-[10px] font-bold text-white">3 new</span> |
| 11 | </div> |
| 12 | <div "color:#79c0ff">className="space-y-1.5"> |
| 13 | <div "color:#79c0ff">className="h-1.5 rounded-full bg-white/20" /> |
| 14 | <div "color:#79c0ff">className="h-1.5 w-3/4 rounded-full bg-white/15" /> |
| 15 | </div> |
| 16 | </div> |
| 17 | </div> |
Deep Shadow Cards
Elevation 1
5-layer shadows
Elevation 2
Colored deep glow
Elevation 3
Maximum depth
Cards with 5-layer box-shadows creating extreme floating depth, including colored shadow variants.
| 1 | <div |
| 2 | "color:#79c0ff">className="w-44 rounded-2xl bg-slate-800 p-5 transition-all duration-300 hover:-translate-y-2" |
| 3 | "color:#79c0ff">style={{ |
| 4 | boxShadow: |
| 5 | "0 1px 2px rgba(0,0,0,0.3), 0 4px 8px rgba(0,0,0,0.3), 0 10px 20px rgba(0,0,0,0.25), 0 24px 40px rgba(0,0,0,0.2), 0 48px 64px rgba(0,0,0,0.15)", |
| 6 | }} |
| 7 | > |
| 8 | <div "color:#79c0ff">className="mb-3 h-12 w-12 rounded-xl bg-gradient-to-br from-violet-500 to-indigo-600" /> |
| 9 | <p "color:#79c0ff">className="text-sm font-bold text-white">Elevation 1</p> |
| 10 | <p "color:#79c0ff">className="mt-1 text-xs text-slate-400">5-layer shadows</p> |
| 11 | </div> |
Lift on Hover
Analytics
Hover to lift
Security
Hover to lift
Performance
Hover to lift
Integrations
Hover to lift
Cards that translate upward on hover with shadow intensity change to simulate realistic lift.
| 1 | <div |
| 2 | "color:#79c0ff">className="group w-36 cursor-pointer rounded-2xl border border-violet-500/20 bg-slate-900 p-4 shadow-lg shadow-violet-500/30 transition-all duration-300 hover:-translate-y-3 hover:shadow-2xl" |
| 3 | > |
| 4 | <div "color:#79c0ff">className="mb-3 flex h-10 w-10 items-center justify-center rounded-xl bg-gradient-to-br from-violet-500 to-purple-600 text-xl"> |
| 5 | 📊 |
| 6 | </div> |
| 7 | <p "color:#79c0ff">className="text-sm font-bold text-white">Analytics</p> |
| 8 | <p "color:#79c0ff">className="mt-1 text-[11px] text-slate-400">Hover to lift</p> |
| 9 | </div> |
Book Cover Effect
Design Systems
A. Rivera
Deep TypeScript
M. Chen
CSS Mastery
J. Park
Card styled as a book cover with a visible spine on the left and a static 3D tilt via rotateY.
| 1 | <div |
| 2 | "color:#79c0ff">className="transform-gpu transition-all duration-500 hover:[transform:rotateY(-5deg)]" |
| 3 | "color:#79c0ff">style={{ transform: "rotateY(-12deg)", transformStyle: "preserve-3d" }} |
| 4 | > |
| 5 | <div "color:#79c0ff">className="relative flex h-48 w-36"> |
| 6 | {/* Spine */} |
| 7 | <div "color:#79c0ff">className="w-4 rounded-l-sm bg-violet-800 shadow-lg" /> |
| 8 | {/* Cover */} |
| 9 | <div "color:#79c0ff">className="flex flex-1 flex-col justify-between rounded-r-sm bg-gradient-to-br from-violet-600 to-fuchsia-700 p-3 shadow-2xl"> |
| 10 | <div> |
| 11 | <div "color:#79c0ff">className="h-1 w-10 rounded-full bg-white/40" /> |
| 12 | <div "color:#79c0ff">className="mt-1.5 h-0.5 w-7 rounded-full bg-white/25" /> |
| 13 | </div> |
| 14 | <div> |
| 15 | <p "color:#79c0ff">className="text-xs font-black leading-tight text-white">Design Systems</p> |
| 16 | <p "color:#79c0ff">className="mt-1 text-[10px] text-white/60">A. Rivera</p> |
| 17 | </div> |
| 18 | </div> |
| 19 | </div> |
| 20 | </div> |
Glass Layer Stack
Glass Layers
3 stacked glass panels
Three overlapping glass panels stacked via translateZ with backdrop-blur and bg-white/10 transparency.
| 1 | <div "color:#79c0ff">className="relative h-52 w-72" "color:#79c0ff">style={{ perspective: "800px", transformStyle: "preserve-3d" }}> |
| 2 | {/* Back glass */} |
| 3 | <div "color:#79c0ff">className="absolute left-4 top-4 h-44 w-64 rounded-2xl border border-white/10 bg-white/5 backdrop-blur-md" |
| 4 | "color:#79c0ff">style={{ transform: "translateZ(-30px)" }} /> |
| 5 | {/* Mid glass */} |
| 6 | <div "color:#79c0ff">className="absolute left-2 top-2 h-44 w-64 rounded-2xl border border-white/15 bg-white/8 backdrop-blur-lg" |
| 7 | "color:#79c0ff">style={{ transform: "translateZ(0px)" }} /> |
| 8 | {/* Front glass */} |
| 9 | <div "color:#79c0ff">className="absolute inset-0 rounded-2xl border border-white/20 bg-white/10 p-5 shadow-2xl backdrop-blur-xl" |
| 10 | "color:#79c0ff">style={{ transform: "translateZ(30px)" }}> |
| 11 | <p "color:#79c0ff">className="text-sm font-bold text-white">Glass Layers</p> |
| 12 | </div> |
| 13 | </div> |
Floating Badge Layers
Dashboard Pro
With floating badge depth
Analytics Kit
With floating badge depth
Cards with floating label badges positioned above with box-shadow depth to simulate elevation.
| 1 | <div "color:#79c0ff">className="relative pt-4 pr-4"> |
| 2 | {/* Badge — floats above */} |
| 3 | <div |
| 4 | "color:#79c0ff">className="absolute -top-2 left-3 z-20 rounded-full bg-violet-500 px-3 py-0.5 text-[11px] font-bold text-white" |
| 5 | "color:#79c0ff">style={{ boxShadow: "0 4px 12px rgba(0,0,0,0.4), 0 2px 4px rgba(0,0,0,0.3)" }} |
| 6 | > |
| 7 | New |
| 8 | </div> |
| 9 | {/* Card */} |
| 10 | <div |
| 11 | "color:#79c0ff">className="w-52 rounded-2xl bg-gradient-to-br from-violet-600 to-indigo-700 p-5" |
| 12 | "color:#79c0ff">style={{ boxShadow: "0 4px 8px rgba(0,0,0,0.25), 0 12px 24px rgba(0,0,0,0.3), 0 28px 48px rgba(0,0,0,0.2)" }} |
| 13 | > |
| 14 | <p "color:#79c0ff">className="text-sm font-bold text-white">Dashboard Pro</p> |
| 15 | </div> |
| 16 | </div> |
Pressable 3D Buttons
Buttons with thick bottom border creating a 3D press effect. Active state removes border and translates down.
| 1 | <button "color:#79c0ff">className="rounded-xl bg-gradient-to-b from-violet-400 to-violet-600 px-7 py-3 font-bold text-white border-b-[5px] border-violet-800 transition-all duration-75 active:border-b-0 active:translate-y-[5px]"> |
| 2 | Violet |
| 3 | </button> |
| 4 | <button "color:#79c0ff">className="rounded-xl bg-gradient-to-b from-rose-400 to-rose-600 px-7 py-3 font-bold text-white border-b-[5px] border-rose-800 transition-all duration-75 active:border-b-0 active:translate-y-[5px]"> |
| 5 | Rose |
| 6 | </button> |
Extruded Buttons
Layered box-shadow simulates extrusion depth. Active state collapses the shadow and translates the button down.
| 1 | <button "color:#79c0ff">className="rounded-xl bg-violet-600 hover:bg-violet-500 px-7 py-3 font-bold text-white shadow-[0_8px_0_rgb(67,56,202)] transition-all duration-75 active:shadow-[0_2px_0_rgb(67,56,202)] active:translate-y-[6px]"> |
| 2 | Launch |
| 3 | </button> |
| 4 | <button "color:#79c0ff">className="rounded-xl bg-emerald-600 hover:bg-emerald-500 px-7 py-3 font-bold text-white shadow-[0_8px_0_rgb(4,120,87)] transition-all duration-75 active:shadow-[0_2px_0_rgb(4,120,87)] active:translate-y-[6px]"> |
| 5 | Deploy |
| 6 | </button> |
3D Glass Buttons
Buttons with perspective tilt, gradient fill, and a reflective top-half white overlay to simulate 3D glass.
| 1 | <div "color:#79c0ff">className="transform-gpu transition-all duration-300 hover:[transform:none]" "color:#79c0ff">style={{ transform: "rotateX(12deg)" }}> |
| 2 | <button "color:#79c0ff">className="relative overflow-hidden rounded-xl border border-violet-400/40 bg-gradient-to-b from-violet-500/80 to-indigo-600/80 px-8 py-3 font-bold text-white shadow-xl backdrop-blur-sm transition-opacity hover:opacity-90"> |
| 3 | {/* Reflective highlight */} |
| 4 | <span "color:#79c0ff">className="pointer-events-none absolute inset-x-0 top-0 h-1/2 rounded-t-xl bg-gradient-to-b from-white/25 to-transparent" /> |
| 5 | Primary |
| 6 | </button> |
| 7 | </div> |
3D Floating Orbs
3D radial-gradient orbs
Gradient sphere-like divs using radial-gradient from light center to dark edge, floating at different speeds.
| 1 | <div "color:#79c0ff">className="relative h-72 overflow-hidden rounded-2xl border border-slate-800 bg-slate-950"> |
| 2 | <div |
| 3 | "color:#79c0ff">className="absolute top-[10%] left-[8%] h-24 w-24 rounded-full transform-gpu" |
| 4 | "color:#79c0ff">style={{ |
| 5 | background: "radial-gradient(circle at 35% 35%, #a78bfa, #7c3aed, #3730a3)", |
| 6 | boxShadow: "0 8px 32px rgba(0,0,0,0.6), inset 0 1px 0 rgba(255,255,255,0.3)", |
| 7 | animation: "float 5s ease-in-out infinite", |
| 8 | }} |
| 9 | /> |
| 10 | {/* Add more orbs with different sizes and animation delays */} |
| 11 | </div> |
Isometric Card Stack
Top Card
Three cards stacked in an isometric 3D perspective with offset shadows and gradient fills.
| 1 | <div "color:#79c0ff">className="relative flex items-center justify-center h-52"> |
| 2 | <div "color:#79c0ff">className="absolute rounded-2xl w-56 h-32 bg-gradient-to-br from-slate-700 to-slate-800 border border-slate-600/50" |
| 3 | "color:#79c0ff">style={{transform:"rotateX(50deg) rotateZ(-45deg) translateX(28px) translateY(28px)",boxShadow:"8px 8px 20px rgba(0,0,0,0.5)"}} /> |
| 4 | <div "color:#79c0ff">className="absolute rounded-2xl w-56 h-32 bg-gradient-to-br from-indigo-700 to-violet-800 border border-indigo-500/30" |
| 5 | "color:#79c0ff">style={{transform:"rotateX(50deg) rotateZ(-45deg) translateX(14px) translateY(14px)",boxShadow:"6px 6px 16px rgba(0,0,0,0.4)"}} /> |
| 6 | <div "color:#79c0ff">className="absolute rounded-2xl w-56 h-32 bg-gradient-to-br from-violet-500 to-fuchsia-600 border border-violet-400/40 flex items-center justify-center" |
| 7 | "color:#79c0ff">style={{transform:"rotateX(50deg) rotateZ(-45deg)",boxShadow:"4px 4px 12px rgba(0,0,0,0.3)"}}> |
| 8 | <p "color:#79c0ff">className="text-white font-bold text-sm rotate-[0deg]">Top Card</p> |
| 9 | </div> |
| 10 | </div> |