Tilt
No library Intermediate
Card tilts in 3D toward the cursor using CSS perspective and rotateX/Y driven by mouse position. Springs back to flat on leave.
Perspective
Move cursor over card
LLM Prompt
Goal: Create a "Tilt" card animation.
Visual behavior: As the cursor moves over the card it tilts in 3D toward the pointer using CSS perspective and rotateX/Y values derived from mouse position. When the cursor leaves, the card springs back to flat. A subtle scale-up accompanies the hover state.
Technique:
- Wrap the card in a container with perspective: 600px (or similar)
- On mousemove, compute normalized x/y offsets from card center: (clientX - rect.left) / rect.width - 0.5
- Map to rotateX (y-axis offset * -16deg) and rotateY (x-axis offset * 16deg)
- Apply transform: rotateX() rotateY() scale(1.04) on hover; reset to 0 on leave
- transformStyle: preserve-3d on the card
- willChange: transform for paint optimization
- transition: none during mouse tracking (instant follow); spring back with transform 400ms ease on mouse leave
- box-shadow deepens on hover for added depth cue
Accessibility: Wrap mouse-tracking logic in a check for window.matchMedia('(prefers-reduced-motion: reduce)'). Under reduced motion, skip tilt and scale; box-shadow transition is fine.
My stack: {{USER_STACK}}
My styling: {{USER_STYLING}}
My constraints: {{USER_CONSTRAINTS}}
Return a single self-contained component. Do not introduce dependencies beyond what I've listed.
Paste into Claude, ChatGPT, or Cursor. Edit YOUR_STACK /
YOUR_STYLING / YOUR_CONSTRAINTS before sending.