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

cssselector {
  transform: translateY(desplazamiento);
}

Ejemplo

Si pasas el cursor del ratón sobre el bloque, se desplazará 30px hacia abajo:

html<div id="elem"></div>

css#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:

html<div id="elem"></div>

css#elem {
  border: 1px solid black;
  width: 100px;
  height: 50px;
}
#elem:hover {
  transform: translateY(-30px);
}

Результат:

Véase también