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-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-fx="mouse:@tilt[{amount}]".
<div data-fx="mouse:@tilt[20]">Scale</div>
<div data-fx="mouse:@tilt[50]">Rotate</div>
<div data-fx="mouse:@tilt[100]">Translate</div>mouse-x
Create a tilt effect when moving the cursor over x axis by using data-fx="mouse-x:@tilt[{amount}]".
<div data-fx="mouse-x:@tilt[20]">Scale</div>
<div data-fx="mouse-x:@tilt[50]">Rotate</div>
<div data-fx="mouse-x:@tilt[100]">Translate</div>mouse-y
Create a tilt effect when moving the cursor over y axis by using data-fx="mouse-y:@tilt[{amount}]".
<div data-fx="mouse-y:@tilt[20]">Scale</div>
<div data-fx="mouse-y:@tilt[50]">Rotate</div>
<div data-fx="mouse-y:@tilt[100]">Translate</div>