Función translateY
La función translateY establece el desplazamiento del elemento
en el eje Y. Se utiliza junto con la propiedad
transform.
El valor de la propiedad puede ser cualquier unidad
de tamaño. Un valor positivo desplaza
hacia abajo, un valor negativo - hacia arriba.
Sintaxis
selector {
transform: translateY(desplazamiento);
}
Ejemplo
Si pasas el cursor del ratón sobre el bloque, se desplazará
30px hacia abajo:
<div id="elem"></div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: translateY(30px);
}
:
Ejemplo
Si pasas el cursor del ratón sobre el bloque, se desplazará
30px hacia arriba:
<div id="elem"></div>
#elem {
border: 1px solid black;
width: 100px;
height: 50px;
}
#elem:hover {
transform: translateY(-30px);
}
:
Véase también
-
la función
translate,
que establece el desplazamiento en los ejes X e Y -
la función
translateX,
que establece el desplazamiento en el eje X
