tilt 3d perspective hover card 3D card tilt on hover perspective hover effect for cards interactive depth on UI elements cards feel flat on hover need 3D tilt effect without JS libraries want perspective-aware hover interaction
Tilt
Fetch snippet JSON:
curl https://webspire.de/snippets/interactions/tilt.json
3D tilt
Product card follows cursor angle
Background
Customize
Quick Start
<div class="tilt rounded-xl bg-white/10 p-6">Hover me</div>Details
- Tailwind
- v4.x
- Browser
- baseline-2024
- A11y
- prefers-reduced-motion
- Size
- 516 bytes · 22 lines
- Custom Properties
-
--tilt-amount--tilt-duration--tilt-perspective--mouse-x--mouse-y - Classes
-
.tilt
tilt 3d perspective hover card
A 3D perspective tilt that follows the cursor position on hover. Uses CSS perspective(), rotateX(), and rotateY() driven by custom properties.
Tilt card
<div class="tilt rounded-xl bg-white/10 border border-white/20 p-8 text-white"
onmousemove="const r=this.getBoundingClientRect();this.style.setProperty('--mouse-x',event.clientX-r.left-r.width/2);this.style.setProperty('--mouse-y',event.clientY-r.top-r.height/2)"
onmouseleave="this.style.setProperty('--mouse-x',0);this.style.setProperty('--mouse-y',0)">
<h3 class="text-lg font-bold">3D Tilt Card</h3>
<p class="mt-2 text-sm text-white/60">Move your cursor around</p>
</div>