Rotate
Utilities for controlling the rotation of an element.
| Class Name | CSS Equivalent |
|---|---|
| rotate-0 | --cds-sys-transform-rotate: 0deg; |
| rotate-1 | --cds-sys-transform-rotate: 1deg; |
| rotate-2 | --cds-sys-transform-rotate: 2deg; |
| rotate-3 | --cds-sys-transform-rotate: 3deg; |
| rotate-6 | --cds-sys-transform-rotate: 6deg; |
| rotate-12 | --cds-sys-transform-rotate: 12deg; |
| rotate-30 | --cds-sys-transform-rotate: 30deg; |
| rotate-45 | --cds-sys-transform-rotate: 45deg; |
| rotate-60 | --cds-sys-transform-rotate: 60deg; |
| rotate-90 | --cds-sys-transform-rotate: 90deg; |
| rotate-180 | --cds-sys-transform-rotate: 180deg; |
| -rotate-0 | --cds-sys-transform-rotate: 0deg; |
| -rotate-1 | --cds-sys-transform-rotate: -1deg; |
| -rotate-2 | --cds-sys-transform-rotate: -2deg; |
| -rotate-3 | --cds-sys-transform-rotate: -3deg; |
| -rotate-6 | --cds-sys-transform-rotate: -6deg; |
| -rotate-12 | --cds-sys-transform-rotate: -12deg; |
| -rotate-30 | --cds-sys-transform-rotate: -30deg; |
| -rotate-45 | --cds-sys-transform-rotate: -45deg; |
| -rotate-60 | --cds-sys-transform-rotate: -60deg; |
| -rotate-90 | --cds-sys-transform-rotate: -90deg; |
| -rotate-180 | --cds-sys-transform-rotate: -180deg; |
Applying Rotation
Apply rotation to an element by using the corresponding rotation utility class.
❗ Keep in mind
To establish rotations, 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 rotation angles can be implemented by assigning classes as outlined on this page.
html
<div class="[...] transform rotate-6">...</div>