Esta página ha sido traducida del inglés por la comunidad.Aprende más y únete a la comunidad de MDN Web Docs.
translate()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since julio de 2015.
La function deCSStranslate() 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 functiontranslate() esta especificada con uno o dos valores.
translate(tx)translate(tx, ty)
Valores
txEs un
<length>que representa la absisa (coordenada x) del vector de translación.tyEs 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 atranslate(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 0 1 tx ty] |
Ejemplos
Translación en un solo eje
HTML
<div>Estático</div><div>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>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.