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 property.

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 to move the element along the x-axis, which can be a number or a percentage.
y

Optional. Defines the distance to move the element 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 indicate the first browser version that fully supports this function.

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

Related Pages

Tutorial:CSS 2D Transformation

Reference:CSS transform attribute

Reference:CSS translateX() function

Reference:CSS translateY() function

Reference:HTML DOM transform attribute