Overview

Tilt effect rotates the element using rotateX and rotateY according to cursor movement. By default, every tilt element has own perspective of 1000px, but you can set a global perspective to parent element by using .perspective class.

Syntax

To create a tilt effect add data-tor-fx="<trigger>:@tilt(<amount>) to your desired element. Where <amount> is the integer and represents the strength of tilt effect. The bigger the <amount> the bigger the element’s rotation.

Examples

mouse

Create a tilt effect when moving the cursor over both x and y axis by using data-tor-fx="mouse:@tilt(<amount>)".

<div data-tor-fx="mouse:@tilt(20)">Scale</div>
<div data-tor-fx="mouse:@tilt(50)">Rotate</div>
<div data-tor-fx="mouse:@tilt(100)">Translate</div>

mouseX

Create a tilt effect when moving the cursor over x axis by using data-tor-fx="mouseX:@tilt(<amount>)".

<div data-tor-fx="mouseX:@tilt(20)">Scale</div>
<div data-tor-fx="mouseX:@tilt(50)">Rotate</div>
<div data-tor-fx="mouseX:@tilt(100)">Translate</div>

mouseY

Create a tilt effect when moving the cursor over y axis by using data-tor-fx="mouseY:@tilt(<amount>)".

<div data-tor-fx="mouseY:@tilt(20)">Scale</div>
<div data-tor-fx="mouseY:@tilt(50)">Rotate</div>
<div data-tor-fx="mouseY:@tilt(100)">Translate</div>