Transforms
Scale
Utilities for scales an element that has transform applied.
Class
class | css |
---|---|
scale-0 | --transform-scale-x: 0; --transform-scale-y: 0 |
scale-50 | --transform-scale-x: .5; --transform-scale-y: .5 |
scale-75 | --transform-scale-x: .75; --transform-scale-y: .75 |
scale-90 | --transform-scale-x: .9; --transform-scale-y: .9 |
scale-95 | --transform-scale-x: .95; --transform-scale-y: .95 |
scale-100 | --transform-scale-x: 1; --transform-scale-y: 1 |
scale-105 | --transform-scale-x: 1.05; --transform-scale-y: 1.05 |
scale-110 | --transform-scale-x: 1.1; --transform-scale-y: 1.1 |
scale-125 | --transform-scale-x: 1.25; --transform-scale-y: 1.25 |
scale-150 | --transform-scale-x: 1.5; --transform-scale-y: 1.5 |
scale-x-0 | --transform-scale-x: 0 |
scale-x-50 | --transform-scale-x: .5 |
scale-x-75 | --transform-scale-x: .75 |
scale-x-90 | --transform-scale-x: .9 |
scale-x-95 | --transform-scale-x: .95 |
scale-x-100 | --transform-scale-x: 1 |
scale-x-105 | --transform-scale-x: 1.05 |
scale-x-110 | --transform-scale-x: 1.1 |
scale-x-125 | --transform-scale-x: 1.25 |
scale-x-150 | --transform-scale-x: 1.5 |
scale-y-0 | --transform-scale-y: 0 |
scale-y-50 | --transform-scale-y: .5 |
scale-y-75 | --transform-scale-y: .75 |
scale-y-90 | --transform-scale-y: .9 |
scale-y-95 | --transform-scale-y: .95 |
scale-y-100 | --transform-scale-y: 1 |
scale-y-105 | --transform-scale-y: 1.05 |
scale-y-110 | --transform-scale-y: 1.1 |
scale-y-125 | --transform-scale-y: 1.25 |
scale-y-150 | --transform-scale-y: 1.5 |
Usage
Set basic Transform Origin with Scale utility. (See Skew, Rotate).
Set the element scale to 50
times smaller.
<!-- Example -->
<img class="transform scale-50 ... h-32 w-24"
src="...">
<y class="transform scale-50 ... h-32 w-24"
style="background-image:utl(...)">
Set the element scale to 150
times larger.
<!-- Example -->
<img class="transform scale-150 ... h-32 w-24"
src="...">
<y class="transform scale-150 ... h-32 w-24"
style="background-image:utl(...)">
Set the element scale horizontal
to 50
times smaller.
<!-- Example -->
<img class="transform scale-x-50 ... h-32 w-24"
src="...">
<y class="transform scale-x-50 ... h-32 w-24"
style="background-image:utl(...)">
Set the element scale vertical
to 50
times smaller.
<!-- Example -->
<img class="transform scale-y-50 ... h-32 w-24"
src="...">
<y class="transform scale-y-50 ... 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 |