Transforms
Skew
Utilities for skews an element that has transform applied.
Class
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 |
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
Variant | Enabled | Responsive |
---|---|---|
Default | Yes | |
Dark Theme | ||
hover | Yes | |
group-hover | ||
focus | ||
focus-within | ||
active | ||
visited | ||
checked | ||
disabled |