CSS translate Property

❮ Previous Complete CSS Reference Next ❯

Example

Change position of an element:

div {
translate: 100px 20px;
}

Definition and Usage

The translate property allows you to change the position of elements.

The translate property defines x- and y-coordinates of an element in 2D. You can also define the z-coordinate to change position in 3D.

Coordinates can be given as only x-coordinates, x- and y-coordinates, or x-, y- and z-coordinates.

To better understand the translate property, view a demo.

Tip: You need to define a value for CSS perspective property for the z-property to take effect.

Note: An alternative technique to translate an element is to use CSS transform property with CSS translate() function. The CSS translate property, as explained on this webpage, is arguably a simpler and more direct way to translate an element.

Show demo ❯

Default value:	none
Inherited:	no
Animatable:	yes. Read about animatable Try it
Version:	CSS3
JavaScript syntax:	object.style.translate="10px 20px" Try it

Browser Support

The numbers in the table specify the first browser version that fully supports the property.

Property
translate	104	104	72	14.1	90

CSS Syntax

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

Property Values

Property Value	Description	Demo
x-axis	Defines position at the x-axis. Possible values: length %	Demo ❯
y-axis	Defines position at the y-axis. Possible values: length %	Demo ❯
z-axis	Defines position at the z-axis. Possible values: length	Demo ❯
initial	Sets this property to its default value. Read about initial
inherit	Inherits this property from its parent element. Read about inherit