3D Tilt Effect Generator

Create card tilt & hover effects with CSS perspective and 3D transforms. Preview live, copy the code.

3D Tilt Card

Move your mouse over this card to see the 3D tilt effect in action.

Hover to interact
Mouse-driven 3D transform
top left
top right
bottom left
bottom right
top mid
bottom mid
CSS tilt demo

3D Tilt Card

Mouse-tracking 3D card tilt with perspective, glare overlay and scale on hover

Take It Further with fullPage.js Cards

Apply 3D tilt transitions to fullscreen sections. Users see a card-like perspective flip as they scroll between pages.

Loading cards demo…
fullPage.js adds
  • ✓ Touch & swipe support
  • ✓ Scroll snapping
  • ✓ Keyboard navigation
  • ✓ Anchor links & history
  • ✓ 60fps performance
  • ✓ Callbacks & events
Get fullPage.js →

What Is the 3D Tilt Effect?

The 3D tilt effect uses CSS perspective and rotate3d transforms to make elements appear to tilt in three-dimensional space when a user hovers over them. The card follows the mouse cursor, creating the illusion of physical depth.

Unlike scroll-driven parallax (which creates depth through motion while scrolling), the tilt effect is interaction-driven — it responds to hover position. This makes it ideal for cards, product images, pricing panels, and any UI element where you want to draw attention through micro-interaction.

The core principle is simple: calculate the mouse position relative to the element's center, then apply proportional rotateX and rotateY values. Add perspective to the container and the flat transforms become a convincing 3D tilt.

CSS Tilt Techniques

1. CSS-Only: Hover Zones

The pure-CSS approach divides the element into invisible quadrants (plus top/bottom edge zones) using absolutely positioned <div> elements. Each zone triggers a different rotate3d transform via the :hover pseudo-class and the general sibling selector (~). Zero JavaScript, zero runtime cost.

.tilt-container {
    perspective: 1000px;
    position: relative;
}

.zone {
    position: absolute;
    width: 50%; height: 50%;
    z-index: 2;
}

.top-left { top: 0; left: 0; }
.top-left:hover ~ img {
    transform: rotate3d(-1, 1, 0, 5deg);
}

2. JavaScript: Mouse Tracking

For a smooth, continuous tilt that follows the cursor precisely, JavaScript calculates the mouse offset from the element's center on every mousemove event. The offset maps to rotateX and rotateY values, producing a fluid tilt with optional glare and scale effects.

card.addEventListener('mousemove', (e) => {
    const rect = card.getBoundingClientRect();
    const x = e.clientX - rect.left;
    const y = e.clientY - rect.top;
    const rotateY = ((x - rect.width/2) / (rect.width/2)) * 15;
    const rotateX = ((rect.height/2 - y) / (rect.height/2)) * 15;
    card.style.transform =
        `rotateX(${rotateX}deg) rotateY(${rotateY}deg)`;
});

Tilt Effect Best Practices

1.

Use GPU-accelerated transforms

rotate3d, scale3d, and perspective are composited by the GPU. They don't trigger layout or paint, keeping animations at 60fps.

2.

Respect prefers-reduced-motion

Some users experience motion sickness. Wrap tilt animations in a @media (prefers-reduced-motion: reduce) query to disable transforms.

3.

Keep rotation angles subtle

5–15 degrees of max rotation feels natural. Extreme angles (30°+) can make content hard to read and the effect feel gimmicky.

4.

Add will-change: transform

Hints the browser to optimize the element for transform changes ahead of time. Apply it to the tilting element, not the container.

5.

Smooth the reset transition

On mouseleave, use a CSS transition (0.3–0.5s ease-out) to animate back to flat. An abrupt snap feels jarring.

FAQ

What is the 3D tilt effect?
The 3D tilt effect uses CSS perspective and rotate3d transforms to make elements appear to tilt in 3D space when the user hovers over them. It creates a card-like interaction where the element follows the mouse cursor, giving the illusion of physical depth.
Can I create a tilt effect with CSS only?
Yes. The CSS-only approach uses invisible hover zones (quadrants) positioned over the element. Each zone triggers a different rotate3d transform via the :hover pseudo-class, creating a tilt effect without any JavaScript. It's less smooth than the JS approach but has zero runtime cost.
How does the JavaScript tilt differ from CSS-only?
JavaScript tilt tracks the exact mouse position and calculates precise rotation angles in real time, producing a smooth, continuous tilt that follows the cursor. CSS-only tilt divides the element into hover zones, so the tilt snaps between fixed angles. JS is smoother; CSS is simpler and has no scripting dependency.
Is the 3D tilt effect performant?
Yes, when implemented correctly. CSS transforms (rotate3d, perspective, scale3d) are GPU-accelerated and supported in 97%+ of browsers without triggering layout recalculations. Add will-change: transform for the browser to optimize ahead of time, and respect prefers-reduced-motion for users who are sensitive to motion.

Join Thousands of Stunning Websites

80+ scroll effects. One line of code. Used on 50,000+ websites.

Brandire
New World of Work
OW Consulting

Powering fullscreen design for Google, Sony, BBC, eBay & more

Get fullPage.js
+ Suggest Effect