translate()

La function de CSS translate() recoloca un elemento en el eje horizontal y/o vertical. Su resultado es de tipo <transform-function>.

Esta transformacion esta compuesta por un vector bidimensional cuyas coordenadas definen cuanto se movera el elemente en cada dirección.

Sintaxis

La function translate() esta especificada con uno o dos valores.

translate(tx)

translate(tx, ty)

Valores

tx: Es un <length> que representa la absisa (coordenada x) del vector de translación.
ty: Es un <length> que representa las ordenadas (coordenada y) del vector de translación. Si no se especifica, su valor es 0. Por ejemplo, translate(2) es equivalente a translate(2, 0).

Coordenadas cartesianas en ℝ²	Coordenadas homogeneas en ℝℙ²	Coordenadas cartesianas en ℝ³	Coordenadas homogeneas en ℝℙ³
Una translación no es una transformación lineal en ℝ² y no puede ser representada usando una matriz de coordenadas cartesianas.	$(\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]`

Ejemplos

Translación en un solo eje

HTML

html

<div>Estático</div>
<div class="moved">Movido</div>
<div>Estático</div>

CSS

css

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

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

Resultado

Translación combinada en los ejes X e Y

HTML

html

<div>Estático</div>
<div class="moved">Movido</div>
<div>Estático</div>

CSS

css

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

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

Resultado

Especificaciones

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

Compatibilidad con navegadores

Ver el tipo de datos <transform-function> para la información de compatibilidad.