CSS translate() Function

Definition and Usage

CSS translate() function allows you to change the position of the element.

translate() function in transform used in the attribute.

Example

Change the position of the element:

#myDiv1 {
  transform: translate(50px); /* Moves the element 50px along the x-axis and 0px along the y-axis */
}
#myDiv2 {
  transform: translate(50px, 20px); /* Moves the element 50px along the x-axis and 20px along the y-axis */
}
#myDiv3 {
  transform: translate(100px, 30px); /* Moves the element 100px along the x-axis and 30px along the y-axis */
}

Try It Yourself

CSS Syntax

translate(x, y)
Value Description
x Required. Defines the distance the element moves along the x-axis, which can be a number or a percentage.
y

Optional. Defines the distance the element moves along the y-axis, which can be a number or a percentage.

If omitted, the value is set to 0.

Technical Details

Version: CSS Transforms Module Level 1

Browser Support

The numbers in the table represent the first browser version to fully support this function.

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

Related Pages

Tutorial:CSS 2D Transformation

Referenz:CSS transform Eigenschaft

Referenz:CSS translateX() Funktion

Referenz:CSS translateY() Funktion

Referenz:HTML DOM transform Eigenschaft