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