Custom Skew

Skew the element over x, y and z axis based on user interaction

Overview

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

Syntax

Use data-tor-fx="<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.

Examples

The <mouse> examples uses __origin(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-fx="scroll:@transform.<skewX|skewY>(<amount>)".

skewX
skewY
<div data-tor-fx="mouse:@transform.skewX(0deg;20deg)">skewX</div>
<div data-tor-fx="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-fx="mouse:@transform.skewX(<amount>)" for horizontal skew and data-tor-fx="mouse:@transform.skewY(<amount>)" for vertical skew.

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

mouseX

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

skewX
skewY
<div data-tor-fx="mouseX:@transform.skewX(0deg;20deg)__origin(start)">skewX</div>
<div data-tor-fx="mouseX:@transform.skewY(0deg;20deg)__origin(start)">skewY</div>

mouseY

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

skewX
skewY
<div data-tor-fx="mouseY:@transform.skewX(0deg;20deg)__origin(start)">skewX</div>
<div data-tor-fx="mouseY:@transform.skewY(0deg;20deg)__origin(start)">skewY</div>