MDN’s new design is in Beta! A sneak peek: https://blog.mozilla.org/opendesign/mdns-new-design-beta/

The translate() CSS function repositions an element in the horizontal and/or vertical directions. This transformation is defined by a vector whose coordinates define how much it moves in each axis.

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. 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 transform in ℝ2 and cannot be represented using a matrix in the cartesian coordinates system.

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

Result

Document Tags and Contributors

 Contributors to this page: mfluehr, Sebastianz, mrstork, SphinxKnight
 Last updated by: mfluehr,