Fonction translateY

La fonction translateY définit le déplacement d'un élément sur l'axe Y. Elle est utilisée conjointement avec la propriété transform. La valeur de la propriété peut être exprimée dans n'importe quelle unité de taille. Une valeur positive déplace vers le bas, une valeur négative - vers le haut.

Syntaxe

csssélecteur {
  transform: translateY(déplacement);
}

Exemple

Si vous passez la souris sur le bloc - il se déplacera de 30px vers le bas :

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

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

Результат:

Exemple

Si vous passez la souris sur le bloc - il se déplacera de 30px vers le haut :

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

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

Результат:

Voir aussi