Transform
translate
translate moves an element horizontally and vertically. It does the same as the translate() function of transform, as a property separate from transform.
Syntax
none | <length-percentage> [ <length-percentage> <length>? ]?Preview
Code
.box {
background: linear-gradient(
135deg,
#88d1c7,
#77a7d7,
#eaac3a
);
border-radius: 8px 32px;
translate: 40px 20px;
}Controls
About
Values
Write the distance to move horizontally (x) and then vertically (y), as lengths or percentages (translate: 40px 20px). Leaving out y makes it 0, so the element only moves horizontally. The initial value is none, which does not move it.
Percentages are relative to the element's own width and height, not its parent's. translate: 100% moves it right by its own width, and translate: -50% -50% moves it up and left by half its size.
A third length for depth (z) is allowed too, but it makes no visible difference unless the parent has perspective. The controls on this page don't cover it, but you can type it into the code.
In the preview on this page, the dashed outline is the original position. Moving the element doesn't change the layout around it, which stays as if it had not moved.
How it relates to transform
translate, rotate and scale are properties separate from transform, so writing them together applies all of them. Writing all four is the same as adding them in this order in front of the transform value, as in transform: translate() rotate() scale() …. So the direction translate moves in is not affected by rotate or scale (whereas transform: rotate(45deg) translateX(60px) moves along the rotated direction).
This is handy for changing just the distance on hover or in an animation while leaving the other transforms as they are. With transform you would have to write out every function again.
Chrome and Edge 104, Firefox 72 and Safari 14.1 and later support it.