Transform Origin
Utilities for controlling the transform origin of an element.
| Class Name | CSS Equivalent |
|---|---|
| origin-top | transform-origin: top center; |
| origin-top-left | transform-origin: top left; |
| origin-top-right | transform-origin: top right; |
| origin-bottom | transform-origin: bottom center; |
| origin-bottom-left | transform-origin: bottom left; |
| origin-bottom-right | transform-origin: bottom right; |
| origin-center | transform-origin: center center; |
Changing Transform Origin
Specify an element’s transform origin using the origin-{keyword} utilities.
❗ Note
To apply transform origin, make sure to include the transform class to establish a default transformation for the element. For example:
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));Then, add the specific transform origin utility class to adjust the origin point.
