Tilt 3D
An element tilts 10° forward and 10° left on hover — a fixed CSS 3D angle, no JavaScript, identical wherever the cursor enters the element.
Updated
This effect is part of Effect.Labs — 840 vanilla effects, some free, some premium. Hover has 48 effects, including 5 free. Explore the category →
3 usage examples
How it works
The .fx-0352-root root centers a .hover-box.hover-tilt block of 200 × 200 px on a #0a0a0f background. transform-style: preserve-3d establishes the 3D context; the transform .3s transition smooths the entry and exit of the hover.
On hover (or focus), the rule .hover-tilt:hover applies transform: perspective(1000px) rotateX(10deg) rotateY(-10deg): the element tilts 10° downward and 10° to the left, with the perspective set at 1,000 px. The angle is identical wherever the cursor enters the element — unlike an interactive tilt like fx-0003 that follows the mouse precisely.
The reverse transition plays on hover-out. Measured in Chromium 151: 300 ms in, 300 ms out, angle stays constant regardless of entry position, two copies on a page — only the hovered one tilts. Playwright's WebKit flattens all CSS 3D: rendering on a real Safari was not verified.
Accessibility
- Reduced motion: under
prefers-reduced-motion: reduce, the CSS removes the transition and cancels the transform on hover and focus — the element stays flat. The hover state remains visible through the focus outline and thepointercursor. - Keyboard: the element is a natively focusable
<button>. The:focus-visiblerule triggers the same 3D transform as hover, with a 2 px indigo outline. - Touch:
:hoverstays active on the first touch on mobile; the tilt shows then holds until the next touch. The effect is not reset ontouchend— native CSS behavior. - Content: the 3D tilt is purely decorative. The element's text content stays readable in every position.
Browser compatibility
Pure CSS (perspective, rotateX, rotateY, transform-style: preserve-3d, :focus-visible, prefers-reduced-motion), no JavaScript. Measured in Chromium 151: constant angle, two independent copies, reduced motion active. Playwright's WebKit flattens all CSS 3D: the real Safari was not verified.
Without perspective or transform-style: preserve-3d (very old browsers), the element stays flat and nothing happens on hover — the content remains accessible.
The code
HTML structure to paste into your page (the CSS + JS come with your purchase):
<div class="fx-0352-root">
<button class="hover-box hover-tilt" type="button">
<span>…</span>
</button>
</div>One-time payment, no subscription — the code is yours forever
Customize
Options passed to the API or data-* attributes:
| Option / property | Default | Effect |
|---|---|---|
Tilt angle (CSS — rotateX and rotateY) |
10° and −10° | Increase for a more pronounced effect (20deg), decrease for a subtle touch (5deg). Use rotateY(10deg) (positive) to tilt right instead of left. |
Perspective distance (CSS — perspective(1000px)) |
1,000 px | Reducing to 400–600 px sharpens the distortion; above 2,000 px the tilt becomes barely noticeable. |
Transition duration (CSS — transition: transform .3s) |
300 ms | .2s makes the effect snappier; .5s makes it smoother. Add an easing: ease-out gives a more natural landing. |
Box-shadow depth (CSS — add to .hover-tilt:hover) |
no shadow | Add box-shadow: 0 20px 40px rgba(0,0,0,.4) to reinforce the floating-card impression. |
Element size (CSS — width / height) |
200 × 200 px | The tilt applies at any size. On wide elements (> 400 px), consider reducing rotateX and rotateY to 5–8° to avoid heavy corner distortion. |
FAQ
perspective, rotateX and rotateY properties are supported since Safari 9 on macOS and iOS 9..fx-0352-root. No JavaScript is used, so there is no risk of conflict between multiple instances.
