Fonction translate() CSS

Définition et utilisation

CSS translate() La fonction translate() permet de modifier la position de l'élément.

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

Exemple

Modifier la position de l'élément :

#myDiv1 {
  transform: translate(50px); /* Déplace l'élément de 50px le long de l'axe x et de 0px le long de l'axe y */
}
#myDiv2 {
  transform: translate(50px, 20px); /* Déplace l'élément de 50px le long de l'axe x et de 20px le long de l'axe y */
}
#myDiv3 {
  transform: translate(100px, 30px); /* Déplace l'élément de 100px le long de l'axe x et de 30px le long de l'axe y */
}

Essayez-le vous-même

Syntaxe CSS

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

Optionnel. 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.

Si omis, la valeur est définie sur 0.

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 translateX() CSS

Référence :Fonction translateY() CSS

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