translate()
Baseline
Ampliamente disponible
Esta característica está consolidada y funciona en muchos dispositivos y versiones de navegador. Está disponible en todos los navegadores desde julio de 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 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 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
| Especificación |
|---|
| CSS Transforms Module Level 1 # funcdef-transform-translate |
Compatibilidad con navegadores
Ver el tipo de datos <transform-function> para la información de compatibilidad.