Tilt Hover

This feature allows you to add a tilt effect by hovering over the element. Nice effect for bringing attention on specific elements and another way to make the page feel more interactive, especially for elements that are clickable like large call to action buttons or linked images.

This feature can be activated from the ‘interactive’ tab inside any native element. If adding to an image, it’s recommended to wrap in a div or block and instead add the functionality there.

Max rotation – Maximum tilt rotation in degrees. (lower will give a more subtle effect, it’s unlikely to need anything higher than 15)

Start rotate X – Starting position rotation along the x-axis, if needing to rotate before the user hovers.

Start rotate Y – Starting position rotation along the y-axis, if needing to rotate before the user hovers.

Scale – Adds a scale along side the rotation when the user hovers. (2 = 200%, 1.5 = 150% etc)

Speed – Speed of the transition in ms

Perspective – The transform perspective ( the lower the more extreme the tilt gets ).

Glare – Enable glare effect as the element rotates. Set the max glare to control how extreme)

Disable tilt effect – Choose the viewporth width to disable the effect if wishing to remove for smaller devices.