Transforms

Skew Transform

Utilities for skews an element that has transform applied.

Variant

Active Checked Child-Selection Dark Mode Disabled Expand First-Last-Selection First-Letter Focus Focus-Visible Focus-Within Fullscreen Group-Focus Group-Hover Hover Landscape Light Mode Portrait Reduce-Motion Responsive Selection-Hover Visited

API

class	css
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

class	css
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.

<img class="transform skew-x-12 ... height-32 width-24" src="...">

<div class="transform skew-x-12 ... height-32 width-24" style="background-image:utl(...)">
  ...
</div>

HTML

img {
  @extend
    .transform,
    .skew-x-12,
    .height-32,
    .width-24;
}
.dummy {
  @extend
    .transform,
    .skew-x-12,
    .height-32,
    .width-24;
}

SCSS

Set the element skew vertical.

Set the element skew reverse horizontal.

<img class="transform -skew-x-12 ... height-32 width-24" src="...">

<div class="transform -skew-x-12 ... height-32 width-24" style="background-image:utl(...)">
  ...
</div>

HTML

img {
  @extend
    .transform,
    .-skew-x-12,
    .height-32,
    .width-24;
}
.dummy {
  @extend
    .transform,
    .-skew-x-12,
    .height-32,
    .width-24;
}

SCSS

Set the element skew reverse vertical.

<img class="transform -skew-y-12 ... height-32 width-24" src="...">

<div class="transform -skew-y-12 ... height-32 width-24" style="background-image:utl(...)">
  ...
</div>

HTML

img {
  @extend
    .transform,
    .-skew-y-12,
    .height-32,
    .width-24;
}
.dummy {
  @extend
    .transform,
    .-skew-y-12,
    .height-32,
    .width-24;
}

SCSS