Skew ​
Utilities for controlling the skew of an element.
| Class Name | CSS Equivalent |
|---|---|
| skew-0 | --cds-sys-transform-skew-x: 0deg; --cds-sys-transform-skew-y: 0deg; |
| skew-x-0 | --cds-sys-transform-skew-x: 0deg; |
| skew-y-0 | --cds-sys-transform-skew-y: 0deg; |
| skew-1 | --cds-sys-transform-skew-x: 1deg; --cds-sys-transform-skew-y: 1deg; |
| skew-x-1 | --cds-sys-transform-skew-x: 1deg; |
| skew-y-1 | --cds-sys-transform-skew-y: 1deg; |
| skew-2 | --cds-sys-transform-skew-x: 2deg; --cds-sys-transform-skew-y: 2deg; |
| skew-x-2 | --cds-sys-transform-skew-x: 2deg; |
| skew-y-2 | --cds-sys-transform-skew-y: 2deg; |
| skew-3 | --cds-sys-transform-skew-x: 3deg; --cds-sys-transform-skew-y: 3deg; |
| skew-x-3 | --cds-sys-transform-skew-x: 3deg; |
| skew-y-3 | --cds-sys-transform-skew-y: 3deg; |
| skew-6 | --cds-sys-transform-skew-x: 6deg; --cds-sys-transform-skew-y: 6deg; |
| skew-x-6 | --cds-sys-transform-skew-x: 6deg; |
| skew-y-6 | --cds-sys-transform-skew-y: 6deg; |
| skew-12 | --cds-sys-transform-skew-x: 12deg; --cds-sys-transform-skew-y: 12deg; |
| skew-x-12 | --cds-sys-transform-skew-x: 12deg; |
| skew-y-12 | --cds-sys-transform-skew-y: 12deg; |
| skew-30 | --cds-sys-transform-skew-x: 30deg; --cds-sys-transform-skew-y: 30deg; |
| skew-x-30 | --cds-sys-transform-skew-x: 30deg; |
| skew-y-30 | --cds-sys-transform-skew-y: 30deg; |
| -skew-0 | --cds-sys-transform-skew-x: 0deg; --cds-sys-transform-skew-y: 0deg; |
| -skew-x-0 | --cds-sys-transform-skew-x: 0deg; |
| -skew-y-0 | --cds-sys-transform-skew-y: 0deg; |
| -skew--1 | --cds-sys-transform-skew-x: -1deg; --cds-sys-transform-skew-y: -1deg; |
| -skew-x--1 | --cds-sys-transform-skew-x: -1deg; |
| -skew-y--1 | --cds-sys-transform-skew-y: -1deg; |
| -skew--2 | --cds-sys-transform-skew-x: -2deg; --cds-sys-transform-skew-y: -2deg; |
| -skew-x--2 | --cds-sys-transform-skew-x: -2deg; |
| -skew-y--2 | --cds-sys-transform-skew-y: -2deg; |
| -skew--3 | --cds-sys-transform-skew-x: -3deg; --cds-sys-transform-skew-y: -3deg; |
| -skew-x--3 | --cds-sys-transform-skew-x: -3deg; |
| -skew-y--3 | --cds-sys-transform-skew-y: -3deg; |
| -skew--6 | --cds-sys-transform-skew-x: -6deg; --cds-sys-transform-skew-y: -6deg; |
| -skew-x--6 | --cds-sys-transform-skew-x: -6deg; |
| -skew-y--6 | --cds-sys-transform-skew-y: -6deg; |
| -skew--12 | --cds-sys-transform-skew-x: -12deg; --cds-sys-transform-skew-y: -12deg; |
| -skew-x--12 | --cds-sys-transform-skew-x: -12deg; |
| -skew-y--12 | --cds-sys-transform-skew-y: -12deg; |
| -skew--30 | --cds-sys-transform-skew-x: -30deg; --cds-sys-transform-skew-y: -30deg; |
| -skew-x--30 | --cds-sys-transform-skew-x: -30deg; |
| -skew-y--30 | --cds-sys-transform-skew-y: -30deg; |
Applying Skew ​
Apply skew to an element by using the corresponding skew utility class.
âť— Keep in mind
To establish skew, 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 skew values can be implemented by assigning classes as outlined on this page.
html
<div class="[...] transform skew-6"> ... </div>