Custom Skew

Overview

Skew effect will skew the element using CSS skewX and skewY property.

Syntax

Use data-tor="<trigger>:@transform=<skewX|skewY>(<start>;<end>) to skew the element over x or y axis. The <start> value represents the beginning skew value, while the <end> is the finish value.

transform shortcut

You can use @T= shortcut instead of writing full @transform= to make your code shorter.

Examples

The <mouse> examples uses {method: start} for more natural behavior. Try to move the cursor from the screen top-left corner into the bottom-right, the left edge to the right one, and from the top edge into the bottom.

scroll

To skew the element when scrolling the page, use data-tor="scroll:@transform=<skewX|skewY>(<amount>)".

<div data-tor="mouse:@transform=skewX(0deg;20deg)">skewX</div>
<div data-tor="mouse:@transform=skewY(0deg;20deg)">skewY</div>

mouse

To skew the element when moving the cursor over both x and y axis, use data-tor="mouse:@transform=skewX(<amount>)" for horizontal skew and data-tor="mouse:@transform=skewY(<amount>)" for vertical skew.

<div data-tor="mouse:@transform=skewX(0deg;20deg, {method: start})">skewX</div>
<div data-tor="mouse:@transform=skewY(0deg;20deg, {method: start})">skewY</div>

mouseX

To skew the element when moving the cursor over x axis, use data-tor="mouseX:@transform=<skewX|skewY>(<amount>)"

<div data-tor="mouseX:@transform=skewX(0deg;20deg, {method: start})">skewX</div>
<div data-tor="mouseX:@transform=skewY(0deg;20deg, {method: start})">skewY</div>

mouseY

To skew the element when moving the cursor over y axis, use data-tor="mouseY:@transform=<skewX|skewY>(<amount>)"

<div data-tor="mouseY:@transform=skewX(0deg;20deg, {method: start})">skewX</div>
<div data-tor="mouseY:@transform=skewY(0deg;20deg, {method: start})">skewY</div>