Esta traducción está incompleta. Por favor, ayuda a traducir este artículo del inglés.

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 ina transformación linera en ℝ2 y no puede ser representada usando una matriz de coordenadas cartesianas.

10tx01ty001 10tx01ty001 100tx010ty00100001
[1 0 0 1 tx ty]

Ejemplos

Translación en un solo eje

HTML

<div>Estático</div>
<div class="movido">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="movido">Movido</div>
<div>Estático</div>

CSS

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

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

Resultado

Compatibilidad con navegadores

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

Véase también

Etiquetas y colaboradores del documento

 Colaboradores en esta página: murielsan, ShakMR
 Última actualización por: murielsan,