MonorailCss

Translate

Utilities for controlling the translation of an element.

Class CSS Output
translate-0 
--tw-translate-x: calc(var(--spacing) * 0);
--tw-translate-y: calc(var(--spacing) * 0);
translate: var(--tw-translate-x, 0) var(--tw-translate-y, 0);
}
translate-4 
--tw-translate-x: calc(var(--spacing) * 4);
--tw-translate-y: calc(var(--spacing) * 4);
translate: var(--tw-translate-x, 0) var(--tw-translate-y, 0);
}
translate-8 
--tw-translate-x: calc(var(--spacing) * 8);
--tw-translate-y: calc(var(--spacing) * 8);
translate: var(--tw-translate-x, 0) var(--tw-translate-y, 0);
}
translate-auto 
--tw-translate-x: auto;
--tw-translate-y: auto;
translate: var(--tw-translate-x, 0) var(--tw-translate-y, 0);
}
translate-px 
--tw-translate-x: 1px;
--tw-translate-y: 1px;
translate: var(--tw-translate-x, 0) var(--tw-translate-y, 0);
}
translate-[value] 
translate: [value]
}
-translate-4 
--tw-translate-x: calc(var(--spacing) * -4);
--tw-translate-y: calc(var(--spacing) * -4);
translate: var(--tw-translate-x, 0) var(--tw-translate-y, 0);
}
translate-x-0 
--tw-translate-x: calc(var(--spacing) * 0);
translate: var(--tw-translate-x, 0) var(--tw-translate-y, 0);
}
translate-x-4 
--tw-translate-x: calc(var(--spacing) * 4);
translate: var(--tw-translate-x, 0) var(--tw-translate-y, 0);
}
translate-x-8 
--tw-translate-x: calc(var(--spacing) * 8);
translate: var(--tw-translate-x, 0) var(--tw-translate-y, 0);
}

translate-0

--tw-translate-x: calc(var(--spacing) * 0);
--tw-translate-y: calc(var(--spacing) * 0);
translate: var(--tw-translate-x, 0) var(--tw-translate-y, 0);

translate-4

--tw-translate-x: calc(var(--spacing) * 4);
--tw-translate-y: calc(var(--spacing) * 4);
translate: var(--tw-translate-x, 0) var(--tw-translate-y, 0);

translate-8

--tw-translate-x: calc(var(--spacing) * 8);
--tw-translate-y: calc(var(--spacing) * 8);
translate: var(--tw-translate-x, 0) var(--tw-translate-y, 0);

translate-auto

--tw-translate-x: auto;
--tw-translate-y: auto;
translate: var(--tw-translate-x, 0) var(--tw-translate-y, 0);

translate-px

--tw-translate-x: 1px;
--tw-translate-y: 1px;
translate: var(--tw-translate-x, 0) var(--tw-translate-y, 0);

translate-[value]

translate: [value]

-translate-4

--tw-translate-x: calc(var(--spacing) * -4);
--tw-translate-y: calc(var(--spacing) * -4);
translate: var(--tw-translate-x, 0) var(--tw-translate-y, 0);

translate-x-0

--tw-translate-x: calc(var(--spacing) * 0);
translate: var(--tw-translate-x, 0) var(--tw-translate-y, 0);

translate-x-4

--tw-translate-x: calc(var(--spacing) * 4);
translate: var(--tw-translate-x, 0) var(--tw-translate-y, 0);

translate-x-8

--tw-translate-x: calc(var(--spacing) * 8);
translate: var(--tw-translate-x, 0) var(--tw-translate-y, 0);

Reference

translate MDN ↗

CSS Properties

  • translate