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="<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="mouse:@tilt(<amount>)".

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

mouseX

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

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

mouseY

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

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