Translate

Syntax

Class
Properties
transform-translate-{x}-{y}
transform: translate({x}{y});

Parameters

x
<length-percentage default-unit=1px>
y
<length-percentage default-unit=1px>
<div class="t1 px-16 py-4 bg-c-white rounded-3 color-blue b-2-blue shadow-8 my-32 cursor-pointer select-none transform-none">Button</div>

Specification test cases

The test cases below are imported from the Turbo CSS specification. They have been executed upon loading this page.
Shift by 2px to the right and by 3px downwards.
t1 transform-translate-2-3
.t1.transform-translate-2-3 { transform: translate(2px, 3px); }
Shift by 20px to the left and by 30px upwards.
t1 transform-translate--20--30
.t1.transform-translate--20--30 { transform: translate(-20px, -30px); }
Shift by 20px to the left and by 30px upwards.
t1 transform-translate--50%-0%
.t1.transform-translate--50\%-0\% { transform: translate(-50%, 0%); }