Campus Design System

Appearance

Skew ​

Utilities for controlling the skew of an element.

Class NameCSS 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.

skew-6
Skew 6deg
-skew-12
Skew -12deg
html
<div class="[...] transform skew-6">...</div>