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.

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 ℝ2 Coordenadas homogeneas en ℝℙ2

Coordenadas cartesianas en ℝ3

 Coordenadas homogeneas en ℝℙ3

Una translación no es una transformación lineal en ℝ2 y no puede ser representada usando una matriz de coordenadas cartesianas.

1 0 tx 0 1 ty 0 0 1 1 0 tx 0 1 ty 0 0 1 1 0 0 tx 0 1 0 ty 0 0 1 0 0 0 0 1
[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.

Véase también