Elements logo

Scale

Utilities for scaling elements with transform

Class reference

ClassProperties
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

Control the scale of an element by first enabling transforms with the transform utility, then specifying the scale using the scale-{percentage}, scale-x-{percentage}, and scale-y-{percentage} utilities.

<img class="transform scale-75 ...">
<img class="transform scale-100 ...">
<img class="transform scale-125 ...">
<img class="transform scale-150 ...">

Note that because Elements implements transforms using CSS custom properties, the transform utilities are not supported in older browsers like IE11.

Responsive

To control the scale of an element at a specific breakpoint, add a {screen}: prefix to any existing scale utility. For example, use md:scale-75 to apply the scale-75 utility at only medium screen sizes and above.

<div class="transform scale-100 **md:scale-75**"></div>

For more information about Elements’ responsive design features, check out the Responsive Design documentation.