Transforms

Scale Transform

Utilities for scales 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
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

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

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

class	css
scale-z-0	--transform-scale-z: 0
scale-z-5	--transform-scale-z: .5
scale-z-75	--transform-scale-z: .75
scale-z-90	--transform-scale-z: .9
scale-z-95	--transform-scale-z: .95
scale-z-100	--transform-scale-z: 1
scale-z-105	--transform-scale-z: 1.05
scale-z-110	--transform-scale-z: 1.1
scale-z-125	--transform-scale-z: 1.25
scale-z-150	--transform-scale-z: 1.5

Usage

Set basic Transform Origin with Scale utility. (See Skew, Rotate).

Set the element scale to 50 times smaller.

<img class="transform scale-50 ... height-32 width-24" src="...">
<div class="transform scale-50 ... height-32 width-24" style="background-image:utl(...)">
  ...
</div>

HTML

img {
  @extend
    .transform,
    .scale-50,
    .height-32,
    .width-24;
}
.dummy {
  @extend
    .transform,
    .scale-50,
    .height-32,
    .width-24;
}

SCSS

Set the element scale to 150 times larger.

<img class="transform scale-150 ... height-32 width-24" src="...">
<div class="transform scale-150 ... height-32 width-24" style="background-image:utl(...)">
  ...
</div>

HTML

img {
  @extend
    .transform,
    .scale-150,
    .height-32,
    .width-24;
}
.dummy {
  @extend
    .transform,
    .scale-150,
    .height-32,
    .width-24;
}

SCSS

Set the element scale horizontal to 50 times smaller.

<img class="transform scale-x-50 ... height-32 width-24" src="...">
<div class="transform scale-x-50 ... height-32 width-24" style="background-image:utl(...)">
  ...
</div>

HTML

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

SCSS

Set the element scale vertical to 50 times smaller.

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

HTML