Scale ​
Utilities for controlling the scale of an element.
| Class Name | CSS Equivalent |
|---|---|
| scale-0 | --cds-sys-transform-scale-x: 0; --cds-sys-transform-scale-y: 0; |
| scale-x-0 | --cds-sys-transform-scale-x: 0; |
| scale-y-0 | --cds-sys-transform-scale-y: 0; |
| scale-50 | --cds-sys-transform-scale-x: 0.5; --cds-sys-transform-scale-y: 0.5; |
| scale-x-50 | --cds-sys-transform-scale-x: 0.5; |
| scale-y-50 | --cds-sys-transform-scale-y: 0.5; |
| scale-75 | --cds-sys-transform-scale-x: 0.75; --cds-sys-transform-scale-y: 0.75; |
| scale-x-75 | --cds-sys-transform-scale-x: 0.75; |
| scale-y-75 | --cds-sys-transform-scale-y: 0.75; |
| scale-90 | --cds-sys-transform-scale-x: 0.9; --cds-sys-transform-scale-y: 0.9; |
| scale-x-90 | --cds-sys-transform-scale-x: 0.9; |
| scale-y-90 | --cds-sys-transform-scale-y: 0.9; |
| scale-95 | --cds-sys-transform-scale-x: 0.95; --cds-sys-transform-scale-y: 0.95; |
| scale-x-95 | --cds-sys-transform-scale-x: 0.95; |
| scale-y-95 | --cds-sys-transform-scale-y: 0.95; |
| scale-100 | --cds-sys-transform-scale-x: 1; --cds-sys-transform-scale-y: 1; |
| scale-x-100 | --cds-sys-transform-scale-x: 1; |
| scale-y-100 | --cds-sys-transform-scale-y: 1; |
| scale-105 | --cds-sys-transform-scale-x: 1.05; --cds-sys-transform-scale-y: 1.05; |
| scale-x-105 | --cds-sys-transform-scale-x: 1.05; |
| scale-y-105 | --cds-sys-transform-scale-y: 1.05; |
| scale-110 | --cds-sys-transform-scale-x: 1.1; --cds-sys-transform-scale-y: 1.1; |
| scale-x-110 | --cds-sys-transform-scale-x: 1.1; |
| scale-y-110 | --cds-sys-transform-scale-y: 1.1; |
| scale-125 | --cds-sys-transform-scale-x: 1.25; --cds-sys-transform-scale-y: 1.25; |
| scale-x-125 | --cds-sys-transform-scale-x: 1.25; |
| scale-y-125 | --cds-sys-transform-scale-y: 1.25; |
| scale-150 | --cds-sys-transform-scale-x: 1.5; --cds-sys-transform-scale-y: 1.5; |
| scale-x-150 | --cds-sys-transform-scale-x: 1.5; |
| scale-y-150 | --cds-sys-transform-scale-y: 1.5; |
| scale-200 | --cds-sys-transform-scale-x: 2; --cds-sys-transform-scale-y: 2; |
| scale-x-200 | --cds-sys-transform-scale-x: 2; |
| scale-y-200 | --cds-sys-transform-scale-y: 2; |
Applying Scale ​
Apply scale to an element by adding the corresponding scale utility class.
âť— Keep in mind
To apply transformations like scale, it's essential to commence class declarations with transform. This action defines a default transformation for the element.
css
transform: translate(var(--cds-sys-transform-translate-x, 0), var(--cds-sys-transform-translate-y, 0)) rotate(var(--cds-sys-transform-rotate, 0deg)) skewX(var(--cds-sys-transform-skew-x, 0deg)) skewY(var(--cds-sys-transform-skew-y, 0deg)) scaleX(var(--cds-sys-transform-scale-x, 1)) scaleY(var(--cds-sys-transform-scale-y, 1));Subsequently, varying scale effects can be implemented by assigning classes as outlined on this page.
html
<div class="[...] transform scale-50"> ... </div>