Recommandation de cours :

Fonction translateY() CSS

Définition et utilisation de translateY() La fonction permet de redéfinir la position des éléments le long de l'axe y (direction verticale).

translateY() fonction dans transform utilisé dans les attributs.

Exemple

Redéfinir la position des éléments <div> dans la direction verticale :

#myDiv1 {
  transform: translateY(30px); /* Déplace l'élément le long de l'axe y de 30px */
}
#myDiv2 {
  transform: translateY(50px); /* Déplace l'élément le long de l'axe y de 50px */
}
#myDiv3 {
  transform: translateY(-10px); /* Déplace l'élément le long de l'axe y de -10px */
}

Essayer vous-même

Syntaxe CSS

translateY(y)
Valeur Description
y Obligatoire. Définit la distance de déplacement de l'élément le long de l'axe y, qui peut être un nombre ou un pourcentage.

Détails techniques

Version : Module de Transformations CSS Niveau 1

Support du navigateur

Les nombres dans le tableau représentent la version du navigateur qui prend en charge cette fonction pour la première fois.

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

Pages associées

Tutoriel :Transformations 2D CSS

Référence :Propriété transform CSS

Référence :Fonction translate() CSS

Référence :Fonction translateX() CSS

Référence :Propriété transform HTML DOM