translateY()
La función translateY()
de CSS reposiciona un elemento verticalmente dentro del plano bidimensional. Su resultado es de tipo <transform-function>
.
Nota: translateY(ty)
es equivalente a translate(0, ty)
o translate3d(0, ty, 0)
.
Sintaxis
css
/* <length-percentage> values */
transform: translateY(200px);
transform: translateY(50%);
Valores
<length-percentage>
-
El valor es de tipo
<length>
o<percentage>
, representando el ordinal del vector de traslación. Un valor en porcentaje es relativo a la altura de la caja de referencia definida por la propiedadtransform-box
(en-US).
Coordenadas cartesianas en ℝ2 | Coordenadas homogéneas en ℝℙ2 | Coordenadas cartesianas en ℝ3 | Coordenadas homogéneas en ℝℙ3 |
---|---|---|---|
Una traslación no es una transformación linear en ℝ2 y no puede ser representada usando una matriz de coordenada cartesiana. |
|
||
[1 0 0 1 0 t] |
Sintaxis formal
translateY(<length-percentage>
(en-US))
Ejemplos
HTML
html
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>
CSS
css
div {
width: 60px;
height: 60px;
background-color: skyblue;
}
.moved {
transform: translateY(10px);
background-color: pink;
}
Resultado
Especificaciones
Specification |
---|
CSS Transforms Module Level 1 # funcdef-transform-translatey |
Compatibilidad de navegadores
Por favor, véase el tipo <transform-function>
para información de compatibilidad.