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 ℝ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

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

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

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

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