Skew

Controls how an element on the 2D plane is transformed.

Class	Style
`t-sk-1`	`transform: skew(1deg);`
`t-sk-2`	`transform: skew(2deg);`
`t-sk-3`	`transform: skew(3deg);`
`t-sk-6`	`transform: skew(6deg);`
`t-sk-12`	`transform: skew(12deg);`

This example showcases various skew() utilities:

The t-sk-3 utility skews the element by 3 degrees.
The t-sk-6 utility skews the element by 6 degrees.
The t-sk-12 utility skews the element by 12 degrees

WIP

<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div class="my-4 p-r">
    <img class="d-18 d-ib rad-1 t-sk-3" src="/img/clivia.jpg" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="/img/clivia.jpg" />
  </div>
  <div class="my-4 p-r">
    <img class="d-18 d-ib rad-1 t-sk-6" src="/img/clivia.jpg" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="/img/clivia.jpg" />
  </div>
  <div class="my-4 p-r">
    <img class="d-18 d-ib rad-1 t-sk-12" src="/img/clivia.jpg" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="/img/clivia.jpg" />
  </div>
</div>

Skew X

This example showcases various skew transformations along the X-axis:

The t-skx-3 utility skews the element by 3 degrees horizontally.
The t-skx-6 utility skews the element by 6 degrees horizontally.
The t-skx-12 utility skews the element by 12 degrees horizontally.

WIP

<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div class="my-4 p-r">
    <img class="d-18 d-ib rad-1 t-skx-3" src="/img/clivia.jpg" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="/img/clivia.jpg" />
  </div>
  <div class="my-4 p-r">
    <img class="d-18 d-ib rad-1 t-skx-6" src="/img/clivia.jpg" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="/img/clivia.jpg" />
  </div>
  <div class="my-4 p-r">
    <img class="d-18 d-ib rad-1 t-skx-12" src="/img/clivia.jpg" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="/img/clivia.jpg" />
  </div>
</div>

Skew Y

This example showcases various skew transformations along the Y-axis:

The t-sky-3 utility skews the element by 3 degrees vertically.
The t-sky-6 utility skews the element by 6 degrees vertically.
The t-sky-12 utility skews the element by 12 degrees vertically.

WIP

<div class="d-g g-16 gtc-1 sm:gtc-3">
  <div class="my-4 p-r">
    <img class="d-18 d-ib rad-1 t-sky-3" src="/img/clivia.jpg" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="/img/clivia.jpg" />
  </div>
  <div class="my-4 p-r">
    <img class="d-18 d-ib rad-1 t-sky-6" src="/img/clivia.jpg" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="/img/clivia.jpg" />
  </div>
  <div class="my-4 p-r">
    <img class="d-18 d-ib rad-1 t-sky-12" src="/img/clivia.jpg" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="/img/clivia.jpg" />
  </div>
</div>

Using utility variants

Learn how to override existing utilities based on the user's screen size or other factors, such as hover states.

Using media queries

You can combine responsive breakpoints like sm:t-sk-*, md:t-sk-*, lg:t-sk-*, and xxl:t-sk-* to allow targeting specific utilities in different viewports.

Using hover states

Alternatively, you can apply :hover by using h:t-sk-* utility to override elements and change their values when hovering over them.