Elements logo

Skew

Utilities for skewing elements with transform

Class reference

ClassProperties
skew-x-0--transform-skew-x: 0deg;
skew-x-1--transform-skew-x: 1deg;
skew-x-2--transform-skew-x: 2deg;
skew-x-3--transform-skew-x: 3deg;
skew-x-6--transform-skew-x: 6deg;
skew-x-12--transform-skew-x: 12deg;
-skew-x-12--transform-skew-x: -12deg;
-skew-x-6--transform-skew-x: -6deg;
-skew-x-3--transform-skew-x: -3deg;
-skew-x-2--transform-skew-x: -2deg;
-skew-x-1--transform-skew-x: -1deg;
skew-y-0--transform-skew-y: 0deg;
skew-y-1--transform-skew-y: 1deg;
skew-y-2--transform-skew-y: 2deg;
skew-y-3--transform-skew-y: 3deg;
skew-y-6--transform-skew-y: 6deg;
skew-y-12--transform-skew-y: 12deg;
-skew-y-12--transform-skew-y: -12deg;
-skew-y-6--transform-skew-y: -6deg;
-skew-y-3--transform-skew-y: -3deg;
-skew-y-2--transform-skew-y: -2deg;
-skew-y-1--transform-skew-y: -1deg;

Usage

Skew an element by first enabling transforms with the transform utility, then specifying the skew angle using the skew-x-{amount} and skew-y-{amount} utilities.

<img class="transform skew-y-0 ...">
<img class="transform skew-y-3 ...">
<img class="transform skew-y-6 ...">
<img class="transform skew-y-12 ...">

Note that because Elements implements transforms using CSS custom properties, the transform utilities are not supported in older browsers like IE11.

Responsive

To control the skew of an element at a specific breakpoint, add a {screen}: prefix to any existing skew utility. For example, use md:skew-6 to apply the skew-6 utility at only medium screen sizes and above.

<div class="transform md:skew-6 ..."></div>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.