translate()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

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

Try it

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

Syntax

css
/* Single <length-percentage> values */
transform: translate(200px);
transform: translate(50%);

/* Double <length-percentage> values */
transform: translate(100px, 200px);
transform: translate(100px, 50%);
transform: translate(30%, 200px);
transform: translate(30%, 50%);

Values

Single <length-percentage> values

This value is a <length> or <percentage> representing the abscissa (horizontal, x-component) of the translating vector [tx, 0]. The ordinate (vertical, y-component) of the translating vector will be set to 0. For example, translate(2px) is equivalent to translate(2px, 0). A percentage value refers to the width of the reference box defined by the transform-box property.

Double <length-percentage> values

This value describes two <length> or <percentage> values representing both the abscissa (horizontal, x-component) and the ordinate (vertical, y-component) of the translating vector [tx, ty]. A percentage as first value refers to the width, as second part to the height of the reference box defined by the transform-box property.

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)\left( \begin{array}{ccc} 1 & 0 & tx \\ 0 & 1 & ty \\ 0 & 0 & 1 \end{array} \right)
(10tx01ty001)\left( \begin{array}{ccc} 1 & 0 & tx \\ 0 & 1 & ty \\ 0 & 0 & 1 \end{array} \right)
(100tx010ty00100001)\left( \begin{array}{cccc} 1 & 0 & 0 & tx \\ 0 & 1 & 0 & ty \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{array} \right)
[1 0 0 1 tx ty]

Formal syntax

<translate()> = 
  translate( <length-percentage> , <length-percentage>? )  

<length-percentage> = 
  <length>      |
  <percentage>

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 {
  /* Equal to: translateX(10px) or translate(10px, 0) */
  transform: translate(10px);
  background-color: pink;
}

Result

Combining y-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: translate(10px, 10px);
  background-color: pink;
}

Result

Specifications

Specification
CSS Transforms Module Level 1
# funcdef-transform-translate

Browser compatibility

BCD tables only load in the browser

See also