Adding Dimension to Flat UI

The 3D Tilt effect is a powerful way to add a tactile feel to web interfaces. By responding to the user's mouse movement, elements appear to physically exist in a 3D space, enhancing engagement and making interactions feel more responsive.

ADVERTISEMENT

How It Works

This effect combines `perspective` on the parent container with `rotateX` and `rotateY` transforms on the child element. JavaScript calculates the cursor's position relative to the element's center and applies the appropriate rotation values.

The Math Behind the Magic

We normalize the mouse coordinates (from 0 to 1) and then map them to a rotation range (e.g., -15deg to +15deg). The `perspective` property determines the intensity of the 3D effect; smaller values create more dramatic distortion.

Code Snippet (JavaScript)


const rotateX = (y / height - 0.5) * -30;
const rotateY = (x / width - 0.5) * 30;
element.style.transform = `perspective(1000px) rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;

Use Cases