3D & Depth

3D Tilt

Also called Perspective tilt, 3D card effect, Tilt card, Tilt on hover, Parallax tilt

A card rotates in perspective toward the pointer, with layered content lifting off the surface.

Product and pricing cards

  • tilt only
  • tilt with glare
  • layered translateZ children
  • 3D Card Effect
  • vanilla-tilt
  • Reverse tilt

View demo source

Prompt

Replace [where] with the part of your page and paste the prompt into your AI agent. Each prompt includes the name of the motion, so next time you can simply ask for it by name.

Add a "3D Tilt" effect (also called a perspective tilt or tilt card) to [where].
The card should lean in perspective toward the pointer as it moves, with its inner layers lifting off the surface at different depths, and ease back flat when the pointer leaves: smooth and subtle.
Keep the tilt gentle so text stays readable, and leave the card flat on touch devices and for users who prefer reduced motion.

Replace [where] with the part of your page and paste the prompt into your AI agent. Each prompt includes the name of the motion, so next time you can simply ask for it by name.