translate3d()

Baseline 2022

Newly available

Since March 2022, this feature works across the latest devices and browser versions. This feature might not work in older devices or browsers.

The translate3d() CSS function repositions an element in 3D space. Its result is a <transform-function> data type.

Try it

This transformation is characterized by a three-dimensional vector [tx, ty, tz]. Its coordinates define how much the element moves in each direction.

Syntax

css
translate3d(tx, ty, tz)

Values

tx

Is a <length> or <percentage> representing the abscissa (horizontal, x-component) of the translating vector [tx, ty, tz].

ty

Is a <length> or <percentage> representing the ordinate (vertical, y-component)of the translating vector [tx, ty, tz].

tz

Is a <length> representing the z-component of the translating vector. It can't be a <percentage> value; in that case the property containing the transform is considered invalid [tx, ty, tz].

Cartesian coordinates on ℝ^2 Homogeneous coordinates on ℝℙ^2 Cartesian coordinates on ℝ^3 Homogeneous coordinates on ℝℙ^3

This transformation applies to the 3D space and can't be represented on the plane.

 A translation is not a linear transformation in ℝ^3 and can't be represented using a Cartesian-coordinate matrix. ( 1 0 0 tx 0 1 0 ty 0 0 1 tz 0 0 0 1 ) \left( \begin{array}{cccc} 1 & 0 & 0 & tx \\ 0 & 1 & 0 & ty \\ 0 & 0 & 1 & tz \\ 0 & 0 & 0 & 1 \end{array} \right)

Examples

Using a single axis translation

HTML

html
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>

CSS

css
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  /* Equivalent to perspective(500px) translateX(10px) */
  transform: perspective(500px) translate3d(10px, 0, 0px);
  background-color: pink;
}

Result

Combining z-axis and x-axis translation

HTML

html
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>

CSS

css
div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  transform: perspective(500px) translate3d(10px, 0, 100px);
  background-color: pink;
}

Result

Specifications

Specification
CSS Transforms Module Level 2
# funcdef-translate3d

Browser compatibility

BCD tables only load in the browser

See also