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
/* <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
.
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>
)
Ejemplos
HTML
<div>Static</div>
<div class="moved">Moved</div>
<div>Static</div>
CSS
div {
width: 60px;
height: 60px;
background-color: skyblue;
}
.moved {
transform: translateY(10px);
background-color: pink;
}
Resultado
Especificaciones
Especificación | Estatus | Comentarios |
---|---|---|
CSS Transforms Level 1 La definición de 'translateY()' en esta especificación. |
Working Draft | Definición inicial |
Compatibilidad de navegadores
Por favor, véase el tipo <transform-function>
para información de compatibilidad.