Press/to search

Transforms

Skew

Utilities for skews an element that has transform applied.


Class

classcss
skew-x-0--transform-skew-x: 0
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-y-0--transform-skew-y: 0
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

Usage

Set basic Transform Origin with Skew utility. (See Scale, Rotate).

Set the element skew horizontal.

<!-- Example -->
<img class="transform skew-x-12 ... h-32 w-24"
src="...">


<y class="transform skew-x-12 ... h-32 w-24"
style="background-image:utl(...)">

Set the element skew vertical.

<!-- Example -->
<img class="transform skew-y-12 ... h-32 w-24"
src="...">


<y class="transform skew-y-12 ... h-32 w-24"
style="background-image:utl(...)">

Set the element skew reverse horizontal.

<!-- Example -->
<img class="transform -skew-x-12 ... h-32 w-24"
src="...">


<y class="transform -skew-x-12 ... h-32 w-24"
style="background-image:utl(...)">

Set the element skew reverse vertical.

<!-- Example -->
<img class="transform -skew-y-12 ... h-32 w-24"
src="...">


<y class="transform -skew-y-12 ... h-32 w-24"
style="background-image:utl(...)">

Variant

ResponsiveDark ModeLight ModeReduce-MotionPortraitLandscapeHoverGroup-HoverFocusGroup-FocusFocus-VisibleFocus-WithinActiveVisitedCheckedDisabled

Default enabled variants. Read more information about the Responsive and Pseudo-Class Variants.