CSS - translate Property

The translate Property

The translate property of CSS allows you to move an element along the X-axis (horizontal), Y-axis (vertical), and Z-axis (depth).

The translate property is similar to the translate() function of the transform property. The only difference between the two is that the latter does not support the Z-axis setting.

Syntax

The syntax for the CSS translate property is as follows:

translate: x-axis y-axis z-axis | none;

Possible values

You can use either <length> or <percentage> to specify the value of the translate property.

Applies to

All the transformable elements.

CSS translate Property with none Value

To specify that there should not be any translation effect on any axis, we use the translate property with none value.

Example

The following example sets the translate property to none which disables the translation effect on the div box.

CSS translate on X-Axis

You can use a single value with the translate property to move an element on the horizontal axis. You can either use length or percentage value for this.

Example

In this example, we have used a positive length value on the first box and a negative percentage value on the second box with the translate property. The first box will move to the right and the second box will move to the left on the x-axis.

CSS translate on Y-Axis

To translate an element on the y-axis, you need to use a double value with the translate property while setting the first value to 0.

Example

In this example, we have used a positive length value on the first box and a negative percentage value on the second box with the translate property. The first box will move downwards and the second box will move upwards on the y-axis.

CSS translate on Z-Axis

To translate an element on the z-axis, you need to use a triple value with the translate property while setting the first two values to 0.

Example

In this example, we have used a positive and negative length value on the first box and second box respectively with the translate property. The first box will appear to move closer to the screen while the second box will move away from the screen.

CSS translate on X and Y Axes

You can translate an element on both the x and y axes by using a double value with the translate property.

Example

In this example, we have used two values with the translate property. The first and second value moves the box in horizontal and vertical directions respectively.

CSS translate on Y and Z Axes

You can translate an element on both the y and z-axes by using a double value with the translate property while setting the x-axes value as 0.

Example

In this example, we have used two values with the translate property. The second and third value moves the box to the y-axis and z-axis respectively.

CSS translate on X and Z Axes

To translate an element on both the x and z-axes, you can use a double value with the translate property while setting the y-axis value to 0.

Example

In this example, we have used two values with the translate property. The first and third value moves the box to the x-axis and z-axis respectively.

CSS translate on X, Y and Z Axes

To translate an element in all directions, you can use three values with the translate property.

Example

In this example, we have used three values with the translate property. The first, second, and third value moves the box horizontally, vertically, and in the z-axis respectively.

Supported Browsers