Skip to main content
Version: 1.1

Skew

Control the Skew of an element using the syntax list below. It will automatically generate width based on amount.

SyntaxOutput
skew-x-{amount}{ transformX: [{ skew: {amount}deg }] }
skew-y-{amount}{ transformY: [{ skew: {amount} }] }
-skew-x-{amount}{ transformX: [{ skew: -{amount}deg }] }
-skew-y-{amount}{ transformY: [{ skew: -{amount}deg }] }

Example

Input

apply("skew-x-50")
apply("skew-y-50")
apply("-skew-x-100")
apply("-skew-y-100")

Output

{
transform: [{ skewX: "50deg" }]
}
{
transform: [{ skewY: "50deg" }]
}
{
transform: [{ skewX: "-100deg" }]
}
{
transform: [{ skewY: "-100deg" }]
}