OneTaskBy Tim King · Updated
3D Tilt Card
Pointer-Following 3D Perspective With Optional Glare Overlay and Copyable Code
OneTask is free, with no sign-up, and built by one person.
If this tool saved you time, a coffee helps keep new ones coming.
How the 3D Tilt Card works
A 3D tilt card leans toward the pointer as it moves across it, as if the card were a real object catching the light. Set the tilt angle, the lift and an optional glare, then copy the HTML, CSS and JavaScript.
The effect adds depth to pricing cards, product tiles and profile cards without any library. The card snaps back smoothly when the pointer leaves.
How the 3D tilt card works
The wrapper sets a CSS perspective, which gives rotations a sense of depth. On every pointer move
the script works out where the pointer sits on the card, from 0 to 1 across and down, and turns
that into two CSS custom properties for rotateX and rotateY. The glare is a radial gradient
whose centre follows the same position. A short transition smooths the movement while tilting and
a longer one eases the card back when the pointer leaves.
Accessibility
The tilt is decorative, so the script does nothing when the visitor has asked for reduced motion. The card content is plain HTML and reads the same with or without the effect.
FAQ
Do I need a library like Vanilla Tilt for this?
No. The whole effect is about twenty lines of JavaScript plus CSS transforms. A library adds options such as gyroscope support, but for a simple hover tilt the code here is smaller and has nothing to install or update.
Does the tilt work on phones?
Touch screens have no hover, so the card only tilts while a finger is dragging across it and then settles back. The card stays fully readable on phones, which is what matters since the tilt is purely decoration.
Why does the card look flat when I rotate it?
Rotation needs perspective on a parent element to look three dimensional. Keep the .tilt
wrapper, and use a smaller perspective value such as 500px for a stronger effect or a larger one
for a subtler one.
How big should the tilt angle be?
Around 8 to 15 degrees looks natural for a card. Larger angles feel playful but can make text hard to read mid-tilt, and very large cards look best with a smaller angle because the edges travel further.
See also: all UI Components tools, Layout & Spacing, Shadows & Motion, Shapes & SVG, Forms & Inputs, Colour.
Related tools
Magnetic Button
Build a button that is pulled toward the cursor as it approaches.
Hover Effect Builder
Build animated hover effects for buttons and links.
Card Builder
Design a card component and copy its HTML and CSS.
Custom Cursor
Build a dot and ring custom cursor that grows over links.
Box Shadow Generator
Stack several shadow layers for depth that looks real.