translate()

The translate() CSS function moves the position of the element on the plane. This transformation is characterized by a vector whose coordinates define how much it moves in each direction.

Syntax

How to read CSS syntax.

translate(tx)       or
translate(tx, ty)

Values

tx: Is a <length> representing the abscissa of the translating vector.
ty: Is a <length> representing the ordinate of the translating vector. If unspecified, it will equal 0 : translate(2) means translate(2, 0).

Cartesian coordinates on ℝ²	Homogeneous coordinates on ℝℙ²	Cartesian coordinates on ℝ³	Homogeneous coordinates on ℝℙ³
A translation is not a linear transform in ℝ² and cannot be represented using a matrix in the cartesian coordinates system.	$(\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

<p>foo</p>
<p class="transformed">bar</p>
<p>foo</p>

CSS

p { 
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed {
  transform: translate(10px);
  /* equivalent to translateX(10px)*/
  background-color: blue;
}

Result

Combining y-axis and x-axis translation

HTML

<p>foo</p>
<p class="transformed">bar</p>
<p>foo</p>

CSS

p { 
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed {
  transform: translate(10px,10px);
  background-color: blue;
}

translate()

Syntax

Values

Examples

Using a single axis translation

HTML

CSS

Result

Combining y-axis and x-axis translation

HTML

CSS

Result

Document Tags and Contributors