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