Custom Tilt
Attach a tilt effect to cursor movement
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>