Transform Skew

Skew element

Syntax

visual="skew-x:[degrees]" or visual="skew-y:[degrees]"

Values

Value	CSS Output	Description
0	transform: skewX(0deg)	No skew
3	transform: skewX(3deg)	3° skew
6	transform: skewX(6deg)	6° skew
12	transform: skewX(12deg)	12° skew

Examples

<div visual="skew-x:6">Skewed element</div>

Preview

Skew Transform

visual="skew-x:6" - Skew elements along axes

0°

6°

12°

View Code

<div layout="flex" space="g:big p:medium" visual="bg:neutral-100 dark:bg:neutral-900 rounded:medium">
  <div space="p:small" visual="bg:primary text:white rounded:small skew-x:0">0°</div>
  <div space="p:small" visual="bg:primary text:white rounded:small skew-x:6">6°</div>
  <div space="p:small" visual="bg:primary text:white rounded:small skew-x:12">12°</div>
</div>

Arbitrary Values

Supports custom values using bracket syntax:

<div visual="transform:[custom-value]">Custom</div>