Scale

Controls how an element changes size on a 2D plane.

Class	Style
`t-s-0`	`transform: scale(0%);`
`t-s-10`	`transform: scale(10%);`
`t-s-20`	`transform: scale(20%);`
`t-s-30`	`transform: scale(30%);`
`t-s-40`	`transform: scale(40%);`
`t-s-50`	`transform: scale(50%);`
`t-s-60`	`transform: scale(60%);`
`t-s-70`	`transform: scale(70%);`
`t-s-80`	`transform: scale(80%);`
`t-s-90`	`transform: scale(90%);`
`t-s-100`	`transform: scale(100%);`

This example showcases various scale() utilities:

The t-s-70 utility scales the element to 70% of its original size.
The t-s-80 utility scales the element to 80% of its original size.
The t-s-90 utility scales the element to 90% of its original size.

<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-s-70" 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-s-80" 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-s-90" src="/img/clivia.jpg" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="/img/clivia.jpg" />
  </div>
</div>

Scale X

This example showcases various horizontal scaling transformations:

The t-sx-70 utility scales the element horizontally to 70% of its original width.
The t-sx-80 utility scales the element horizontally to 80% of its original width.
The t-sx-90 utility scales the element horizontally to 90% of its original width.

<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-sx-70" 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-sx-80" 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-sx-90" src="/img/clivia.jpg" />
    <img class="o-20 d-18 d-ib l-0 p-a rad-1" src="/img/clivia.jpg" />
  </div>
</div>

Scale Y

This example showcases various vertical scaling transformations:

The t-sy-70 utility scales the element vertically to 70% of its original height.
The t-sy-80 utility scales the element vertically to 80% of its original height.
The t-sy-90 utility scales the element vertically to 90% of its original height.

<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-sy-70" 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-sy-80" 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-sy-90" 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-s-*, md:t-s-*, lg:t-s-*, and xxl:t-s-* to allow targeting specific utilities in different viewports.

Using hover states

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