The Mouse Tilt interaction creates an effect where an element is rotated or tilted on its X and Y axes, creating a realistic 3D perspective that follows the cursor.
Get started by finding the interaction when opening the Interactions tab and selecting the "Mouse Tilt" interaction. 🔗 Learn how to use interactions.
Setting Tilt Rotation
The tilt effect is controlled by a pixel-based input that defines the maximum rotation across the X and Y axes. The Mouse Tilt interaction offers both convenient preset settings and fine-tuned control, allowing you to customize the effect.
Selecting the Preset
You can choose between two default tilt presets: Push or Pull. By default, it is set to Push.
Preset | Tilt Setting | Visual Effect |
Push | The element is rotated by -20px on both x and y axes, following the direction of the cursor. | The element appears to be tilting away in the opposite direction of the cursor movement. |
Pull | The element is rotated by 20px on both x and y axes, following the direction of the cursor. | The element appears to be tilting in the same direction as the cursor movement. |
Setting a Custom Tilt
For a more precise or stronger effect, you can enable the custom control by pressing the slider button next to the "Tilt" label. This activates a slider that lets you customize the tilt range between -500px and +500px.
0px: If set to 0 pixels, the element will have no tilt effect.
Stronger Effect: The further the value is from 0 (whether
-500or+500), the more dramatic the effect will be.