Campus Design System

Appearance

Translate ​

Utilities for controlling the translation of an element.

Class NameCSS Equivalent
translate-0--cds-sys-transform-translate-x: 0;
--cds-sys-transform-translate-y: 0;
translate-x-0--cds-sys-transform-translate-x: 0;
translate-y-0--cds-sys-transform-translate-y: 0;
translate-full--cds-sys-transform-translate-x: 100%;
--cds-sys-transform-translate-y: 100%;
translate-x-full--cds-sys-transform-translate-x: 100%;
translate-y-full--cds-sys-transform-translate-y: 100%;
translate-extreme--cds-sys-transform-translate-x: 120%;
--cds-sys-transform-translate-y: 120%;
translate-x-extreme--cds-sys-transform-translate-x: 120%;
translate-y-extreme--cds-sys-transform-translate-y: 120%;
translate-1/2--cds-sys-transform-translate-x: 50%;
--cds-sys-transform-translate-y: 50%;
translate-x-1/2--cds-sys-transform-translate-x: 50%;
translate-y-1/2--cds-sys-transform-translate-y: 50%;
translate-1/3--cds-sys-transform-translate-x: 33.3333333333%;
--cds-sys-transform-translate-y: 33.3333333333%;
translate-x-1/3--cds-sys-transform-translate-x: 33.3333333333%;
translate-y-1/3--cds-sys-transform-translate-y: 33.3333333333%;
translate-2/3--cds-sys-transform-translate-x: 66.6666666667%;
--cds-sys-transform-translate-y: 66.6666666667%;
translate-x-2/3--cds-sys-transform-translate-x: 66.6666666667%;
translate-y-2/3--cds-sys-transform-translate-y: 66.6666666667%;
translate-1/4--cds-sys-transform-translate-x: 25%;
--cds-sys-transform-translate-y: 25%;
translate-x-1/4--cds-sys-transform-translate-x: 25%;
translate-y-1/4--cds-sys-transform-translate-y: 25%;
translate-2/4--cds-sys-transform-translate-x: 50%;
--cds-sys-transform-translate-y: 50%;
translate-x-2/4--cds-sys-transform-translate-x: 50%;
translate-y-2/4--cds-sys-transform-translate-y: 50%;
translate-3/4--cds-sys-transform-translate-x: 75%;
--cds-sys-transform-translate-y: 75%;
translate-x-3/4--cds-sys-transform-translate-x: 75%;
translate-y-3/4--cds-sys-transform-translate-y: 75%;
translate-1/5--cds-sys-transform-translate-x: 20%;
--cds-sys-transform-translate-y: 20%;
translate-x-1/5--cds-sys-transform-translate-x: 20%;
translate-y-1/5--cds-sys-transform-translate-y: 20%;
translate-2/5--cds-sys-transform-translate-x: 40%;
--cds-sys-transform-translate-y: 40%;
translate-x-2/5--cds-sys-transform-translate-x: 40%;
translate-y-2/5--cds-sys-transform-translate-y: 40%;
translate-3/5--cds-sys-transform-translate-x: 60%;
--cds-sys-transform-translate-y: 60%;
translate-x-3/5--cds-sys-transform-translate-x: 60%;
translate-y-3/5--cds-sys-transform-translate-y: 60%;
translate-4/5--cds-sys-transform-translate-x: 80%;
--cds-sys-transform-translate-y: 80%;
translate-x-4/5--cds-sys-transform-translate-x: 80%;
translate-y-4/5--cds-sys-transform-translate-y: 80%;
translate-1/6--cds-sys-transform-translate-x: 16.6666666667%;
--cds-sys-transform-translate-y: 16.6666666667%;
translate-x-1/6--cds-sys-transform-translate-x: 16.6666666667%;
translate-y-1/6--cds-sys-transform-translate-y: 16.6666666667%;
translate-2/6--cds-sys-transform-translate-x: 33.3333333333%;
--cds-sys-transform-translate-y: 33.3333333333%;
translate-x-2/6--cds-sys-transform-translate-x: 33.3333333333%;
translate-y-2/6--cds-sys-transform-translate-y: 33.3333333333%;
translate-3/6--cds-sys-transform-translate-x: 50%;
--cds-sys-transform-translate-y: 50%;
translate-x-3/6--cds-sys-transform-translate-x: 50%;
translate-y-3/6--cds-sys-transform-translate-y: 50%;
translate-4/6--cds-sys-transform-translate-x: 66.6666666667%;
--cds-sys-transform-translate-y: 66.6666666667%;
translate-x-4/6--cds-sys-transform-translate-x: 66.6666666667%;
translate-y-4/6--cds-sys-transform-translate-y: 66.6666666667%;
translate-5/6--cds-sys-transform-translate-x: 83.3333333333%;
--cds-sys-transform-translate-y: 83.3333333333%;
translate-x-5/6--cds-sys-transform-translate-x: 83.3333333333%;
translate-y-5/6--cds-sys-transform-translate-y: 83.3333333333%;
translate-1/12--cds-sys-transform-translate-x: 8.3333333333%;
--cds-sys-transform-translate-y: 8.3333333333%;
translate-x-1/12--cds-sys-transform-translate-x: 8.3333333333%;
translate-y-1/12--cds-sys-transform-translate-y: 8.3333333333%;
translate-2/12--cds-sys-transform-translate-x: 16.6666666667%;
--cds-sys-transform-translate-y: 16.6666666667%;
translate-x-2/12--cds-sys-transform-translate-x: 16.6666666667%;
translate-y-2/12--cds-sys-transform-translate-y: 16.6666666667%;
translate-3/12--cds-sys-transform-translate-x: 25%;
--cds-sys-transform-translate-y: 25%;
translate-x-3/12--cds-sys-transform-translate-x: 25%;
translate-y-3/12--cds-sys-transform-translate-y: 25%;
translate-4/12--cds-sys-transform-translate-x: 33.3333333333%;
--cds-sys-transform-translate-y: 33.3333333333%;
translate-x-4/12--cds-sys-transform-translate-x: 33.3333333333%;
translate-y-4/12--cds-sys-transform-translate-y: 33.3333333333%;
translate-5/12--cds-sys-transform-translate-x: 41.6666666667%;
--cds-sys-transform-translate-y: 41.6666666667%;
translate-x-5/12--cds-sys-transform-translate-x: 41.6666666667%;
translate-y-5/12--cds-sys-transform-translate-y: 41.6666666667%;
translate-6/12--cds-sys-transform-translate-x: 50%;
--cds-sys-transform-translate-y: 50%;
translate-x-6/12--cds-sys-transform-translate-x: 50%;
translate-y-6/12--cds-sys-transform-translate-y: 50%;
translate-7/12--cds-sys-transform-translate-x: 58.3333333333%;
--cds-sys-transform-translate-y: 58.3333333333%;
translate-x-7/12--cds-sys-transform-translate-x: 58.3333333333%;
translate-y-7/12--cds-sys-transform-translate-y: 58.3333333333%;
translate-8/12--cds-sys-transform-translate-x: 66.6666666667%;
--cds-sys-transform-translate-y: 66.6666666667%;
translate-x-8/12--cds-sys-transform-translate-x: 66.6666666667%;
translate-y-8/12--cds-sys-transform-translate-y: 66.6666666667%;
translate-9/12--cds-sys-transform-translate-x: 75%;
--cds-sys-transform-translate-y: 75%;
translate-x-9/12--cds-sys-transform-translate-x: 75%;
translate-y-9/12--cds-sys-transform-translate-y: 75%;
translate-10/12--cds-sys-transform-translate-x: 83.3333333333%;
--cds-sys-transform-translate-y: 83.3333333333%;
translate-x-10/12--cds-sys-transform-translate-x: 83.3333333333%;
translate-y-10/12--cds-sys-transform-translate-y: 83.3333333333%;
translate-11/12--cds-sys-transform-translate-x: 91.6666666667%;
--cds-sys-transform-translate-y: 91.6666666667%;
translate-x-11/12--cds-sys-transform-translate-x: 91.6666666667%;
translate-y-11/12--cds-sys-transform-translate-y: 91.6666666667%;
-translate-0--cds-sys-transform-translate-x: 0;
--cds-sys-transform-translate-y: 0;
-translate-x-0--cds-sys-transform-translate-x: 0;
-translate-y-0--cds-sys-transform-translate-y: 0;
-translate-full--cds-sys-transform-translate-x: -100%;
--cds-sys-transform-translate-y: -100%;
-translate-x-full--cds-sys-transform-translate-x: -100%;
-translate-y-full--cds-sys-transform-translate-y: -100%;
-translate-extreme--cds-sys-transform-translate-x: -120%;
--cds-sys-transform-translate-y: -120%;
-translate-x-extreme--cds-sys-transform-translate-x: -120%;
-translate-y-extreme--cds-sys-transform-translate-y: -120%;
-translate-1/2--cds-sys-transform-translate-x: -50%;
--cds-sys-transform-translate-y: -50%;
-translate-x-1/2--cds-sys-transform-translate-x: -50%;
-translate-y-1/2--cds-sys-transform-translate-y: -50%;
-translate-1/3--cds-sys-transform-translate-x: -33.3333333333%;
--cds-sys-transform-translate-y: -33.3333333333%;
-translate-x-1/3--cds-sys-transform-translate-x: -33.3333333333%;
-translate-y-1/3--cds-sys-transform-translate-y: -33.3333333333%;
-translate-2/3--cds-sys-transform-translate-x: -66.6666666667%;
--cds-sys-transform-translate-y: -66.6666666667%;
-translate-x-2/3--cds-sys-transform-translate-x: -66.6666666667%;
-translate-y-2/3--cds-sys-transform-translate-y: -66.6666666667%;
-translate-1/4--cds-sys-transform-translate-x: -25%;
--cds-sys-transform-translate-y: -25%;
-translate-x-1/4--cds-sys-transform-translate-x: -25%;
-translate-y-1/4--cds-sys-transform-translate-y: -25%;
-translate-2/4--cds-sys-transform-translate-x: -50%;
--cds-sys-transform-translate-y: -50%;
-translate-x-2/4--cds-sys-transform-translate-x: -50%;
-translate-y-2/4--cds-sys-transform-translate-y: -50%;
-translate-3/4--cds-sys-transform-translate-x: -75%;
--cds-sys-transform-translate-y: -75%;
-translate-x-3/4--cds-sys-transform-translate-x: -75%;
-translate-y-3/4--cds-sys-transform-translate-y: -75%;
-translate-1/5--cds-sys-transform-translate-x: -20%;
--cds-sys-transform-translate-y: -20%;
-translate-x-1/5--cds-sys-transform-translate-x: -20%;
-translate-y-1/5--cds-sys-transform-translate-y: -20%;
-translate-2/5--cds-sys-transform-translate-x: -40%;
--cds-sys-transform-translate-y: -40%;
-translate-x-2/5--cds-sys-transform-translate-x: -40%;
-translate-y-2/5--cds-sys-transform-translate-y: -40%;
-translate-3/5--cds-sys-transform-translate-x: -60%;
--cds-sys-transform-translate-y: -60%;
-translate-x-3/5--cds-sys-transform-translate-x: -60%;
-translate-y-3/5--cds-sys-transform-translate-y: -60%;
-translate-4/5--cds-sys-transform-translate-x: -80%;
--cds-sys-transform-translate-y: -80%;
-translate-x-4/5--cds-sys-transform-translate-x: -80%;
-translate-y-4/5--cds-sys-transform-translate-y: -80%;
-translate-1/6--cds-sys-transform-translate-x: -16.6666666667%;
--cds-sys-transform-translate-y: -16.6666666667%;
-translate-x-1/6--cds-sys-transform-translate-x: -16.6666666667%;
-translate-y-1/6--cds-sys-transform-translate-y: -16.6666666667%;
-translate-2/6--cds-sys-transform-translate-x: -33.3333333333%;
--cds-sys-transform-translate-y: -33.3333333333%;
-translate-x-2/6--cds-sys-transform-translate-x: -33.3333333333%;
-translate-y-2/6--cds-sys-transform-translate-y: -33.3333333333%;
-translate-3/6--cds-sys-transform-translate-x: -50%;
--cds-sys-transform-translate-y: -50%;
-translate-x-3/6--cds-sys-transform-translate-x: -50%;
-translate-y-3/6--cds-sys-transform-translate-y: -50%;
-translate-4/6--cds-sys-transform-translate-x: -66.6666666667%;
--cds-sys-transform-translate-y: -66.6666666667%;
-translate-x-4/6--cds-sys-transform-translate-x: -66.6666666667%;
-translate-y-4/6--cds-sys-transform-translate-y: -66.6666666667%;
-translate-5/6--cds-sys-transform-translate-x: -83.3333333333%;
--cds-sys-transform-translate-y: -83.3333333333%;
-translate-x-5/6--cds-sys-transform-translate-x: -83.3333333333%;
-translate-y-5/6--cds-sys-transform-translate-y: -83.3333333333%;
-translate-1/12--cds-sys-transform-translate-x: -8.3333333333%;
--cds-sys-transform-translate-y: -8.3333333333%;
-translate-x-1/12--cds-sys-transform-translate-x: -8.3333333333%;
-translate-y-1/12--cds-sys-transform-translate-y: -8.3333333333%;
-translate-2/12--cds-sys-transform-translate-x: -16.6666666667%;
--cds-sys-transform-translate-y: -16.6666666667%;
-translate-x-2/12--cds-sys-transform-translate-x: -16.6666666667%;
-translate-y-2/12--cds-sys-transform-translate-y: -16.6666666667%;
-translate-3/12--cds-sys-transform-translate-x: -25%;
--cds-sys-transform-translate-y: -25%;
-translate-x-3/12--cds-sys-transform-translate-x: -25%;
-translate-y-3/12--cds-sys-transform-translate-y: -25%;
-translate-4/12--cds-sys-transform-translate-x: -33.3333333333%;
--cds-sys-transform-translate-y: -33.3333333333%;
-translate-x-4/12--cds-sys-transform-translate-x: -33.3333333333%;
-translate-y-4/12--cds-sys-transform-translate-y: -33.3333333333%;
-translate-5/12--cds-sys-transform-translate-x: -41.6666666667%;
--cds-sys-transform-translate-y: -41.6666666667%;
-translate-x-5/12--cds-sys-transform-translate-x: -41.6666666667%;
-translate-y-5/12--cds-sys-transform-translate-y: -41.6666666667%;
-translate-6/12--cds-sys-transform-translate-x: -50%;
--cds-sys-transform-translate-y: -50%;
-translate-x-6/12--cds-sys-transform-translate-x: -50%;
-translate-y-6/12--cds-sys-transform-translate-y: -50%;
-translate-7/12--cds-sys-transform-translate-x: -58.3333333333%;
--cds-sys-transform-translate-y: -58.3333333333%;
-translate-x-7/12--cds-sys-transform-translate-x: -58.3333333333%;
-translate-y-7/12--cds-sys-transform-translate-y: -58.3333333333%;
-translate-8/12--cds-sys-transform-translate-x: -66.6666666667%;
--cds-sys-transform-translate-y: -66.6666666667%;
-translate-x-8/12--cds-sys-transform-translate-x: -66.6666666667%;
-translate-y-8/12--cds-sys-transform-translate-y: -66.6666666667%;
-translate-9/12--cds-sys-transform-translate-x: -75%;
--cds-sys-transform-translate-y: -75%;
-translate-x-9/12--cds-sys-transform-translate-x: -75%;
-translate-y-9/12--cds-sys-transform-translate-y: -75%;
-translate-10/12--cds-sys-transform-translate-x: -83.3333333333%;
--cds-sys-transform-translate-y: -83.3333333333%;
-translate-x-10/12--cds-sys-transform-translate-x: -83.3333333333%;
-translate-y-10/12--cds-sys-transform-translate-y: -83.3333333333%;
-translate-11/12--cds-sys-transform-translate-x: -91.6666666667%;
--cds-sys-transform-translate-y: -91.6666666667%;
-translate-x-11/12--cds-sys-transform-translate-x: -91.6666666667%;
-translate-y-11/12--cds-sys-transform-translate-y: -91.6666666667%;

Applying Translation ​

Apply translation to an element by using the corresponding translation utility class.

❗ Keep in mind

To establish translations, 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 translation values can be implemented by assigning classes as outlined on this page.

translate-1/2
translate-x-1/3
-translate-y-1/12