W3cubDocs

/CSS

translate()

The translate() CSS function repositions an element in the horizontal and/or vertical directions. Its result is a <transform-function> data type.

This transformation is characterized by a two-dimensional vector. Its coordinates define how much the element moves in each direction.

Syntax

The translate() function is specified as either one or two values.

translate(tx)

translate(tx, ty)

Values

tx: Is a <length> representing the abscissa (x-coordinate) of the translating vector.
ty: Is a <length> representing the ordinate of the translating vector (or y-coordinate). If unspecified, its default value is 0. For example, translate(2) is equivalent to translate(2, 0).

Cartesian coordinates on ℝ²	Homogeneous coordinates on ℝℙ²	Cartesian coordinates on ℝ³	Homogeneous coordinates on ℝℙ³
A translation is not a linear transformation in ℝ² and can't be represented using a Cartesian-coordinate matrix.	$(\begin{matrix} 1 & 0 & tx \\ 0 & 1 & ty \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} 1 & 0 & tx \\ 0 & 1 & ty \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} 1 & 0 & 0 & tx \\ 0 & 1 & 0 & ty \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{matrix})$
	`[1 0 0 1 tx ty]`

Examples

Using a single-axis translation

HTML

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

CSS

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

.moved {
  transform: translate(10px); /* Equal to translateX(10px) */
  background-color: pink;
}

Result

Combining y-axis and x-axis translation

HTML

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

CSS

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

.moved {
  transform: translate(10px, 10px);
  background-color: pink;
}

Result

Browser compatibility

Please see the <transform-function> data type for compatibility info.

translate()

Syntax

Values

Examples

Using a single-axis translation

HTML

CSS

Result

Combining y-axis and x-axis translation

HTML

CSS

Result

Browser compatibility

See also