Sections

Scale transforms

Utilities for scaling elements with transforms.

Class Properties
.scale-95 transform: scale(.95);
.scale-100 transform: scale(100);
.scale-105 transform: scale(1.05);
.scale-110 transform: scale(1.1);

Usage

Use .scale-{percentage} to scale an element by a given percentage.

.scale-95

Avatar

.scale-0

Avatar

.scale-105

Avatar

.scale-110

Avatar
<div class="avatar scale-95">
  <img class="avatar-img" src="..." alt="...">
</div>
<div class="avatar scale-0">
  <img class="avatar-img" src="..." alt="...">
</div>
<div class="avatar scale-105">
  <img class="avatar-img" src="..." alt="...">
</div>
<div class="avatar scale-110">
  <img class="avatar-img" src="..." alt="...">
</div>

Variants

By default, only hover-state variants are generated for scale utilities.

Responsive

To include responsive variants like .md:scale-105, add "scale" to the $responsive-variants variable in your theme’s _variables.scss file when recompiling your CSS:

$responsive-variants: (
  // ...
  "scale",
);

Hover-state

To control the text decoration of an element on hover, add the hover: prefix to any existing text color utility.

For example, use hover:scale-105 to apply the scale-105 utility when the mouse is hovered over the element.