Scale

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>

Conditional styles

Learn how to override existing utilities based on the user’s screen size or other factors, such as hover states.

Breakpoint variant

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.

<div class="t-s-10 md:t-s-20 ..."></div>

Hover variant

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

<div class="t-s-10 h:t-s-20 ..."></div>