Custom Tilt

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>)".

<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>)".

<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>)".

<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>