Función CSS translateY()

Definición y uso

CSS translateY() La función permite reubicar los elementos a lo largo del eje y (dirección vertical).

translateY() La función se utiliza en transform usado en la propiedad.

Ejemplo

Reubicar diferentes elementos <div> en la dirección vertical:

#myDiv1 {
  transform: translateY(30px); /* Mueve el elemento 30px a lo largo del eje y */
}
#myDiv2 {
  transform: translateY(50px); /* Mueve el elemento 50px a lo largo del eje y */
}
#myDiv3 {
  transform: translateY(-10px); /* Mueve el elemento -10px a lo largo del eje y */
}

Prueba personalmente

Sintaxis CSS

translateY(y)
Valor Descripción
y Obligatorio. Define la distancia de desplazamiento del elemento a lo largo del eje y, que puede ser un número o un porcentaje.

Detalles técnicos

Versión: Módulo de Transformaciones CSS Nivel 1

Compatibilidad del navegador

Los números en la tabla representan la versión del navegador que primero soportó esta función.

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

Páginas relacionadas

Tutoriales:Transformaciones 2D CSS

Referencia:Atributo transform de CSS

Referencia:Función translate() de CSS

Referencia:Función translateX() de CSS

Referencia:Atributo transform del DOM HTML