translate()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 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
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.