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 ℝ2 Homogeneous coordinates on ℝℙ2 Cartesian coordinates on ℝ3 Homogeneous coordinates on ℝℙ3

A translation is not a linear transformation in ℝ2 and can't be represented using a Cartesian-coordinate matrix.

10tx01ty001 10tx01ty001 100tx010ty00100001
[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.

See also

© 2005–2018 Mozilla Developer Network and individual contributors.
Licensed under the Creative Commons Attribution-ShareAlike License v2.5 or later.
https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/translate