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