CSS translate attribute

Previous page transition-timing-function
Next Page unicode-bidi

Definition and usage

translate This property allows you to change the position of the element.

translate This property defines the x-axis and y-axis coordinates of the element in two-dimensional space. You can also define the z-axis coordinate to change the position in three-dimensional space.

Coordinates can be given only the x-axis coordinate, x-axis and y-axis coordinates, or x-axis, y-axis, and z-axis coordinates.

To better understand translate For more information on theDemonstration.

Tip:To make the z-axis property effective, you need to define a value for the CSS perspective property.

Note:Another technique to translate elements is to use CSS translate() function This page's CSS transform property can be said to be a simpler and more direct method to translate elements.

Example

Example 1

Change the position of the element:

div {
  translate: 100px 20px;
}

Try it yourself

Example 2

When setting the z-axis translate When setting the z-axis perspective Properties, we can see any effect:

DIV1 {
  perspective: 200px;
}
DIV2 {
  translate: 50px 50px 50px;
}

Try it yourself

CSS Syntax

translate: x-axis y-axis z-axis|initial|inherit;

Property value

Value	Description
x-axis	Define the position on the x-axis. Possible values: Length Percentage
y-axis	Define the position on the y-axis. Possible values: Length Percentage
z-axis	Define the position on the z-axis. Possible values: Length Percentage
initial	Set this property to its default value. See initial.
inherit	Inherit this property from its parent element. See inherit.

Technical details

Default value:	none
Inheritance:	No
Animation creation:	Supported. See:Animation-related properties.
Version:	CSS3
JavaScript Syntax:	object.style.translate="10px 20px"