Propriété translate CSS

Définition et utilisation

translate Cette propriété vous permet de changer la position de l'élément.

translate Cette propriété définit les coordonnées de l'axe x et de l'axe y de l'élément dans l'espace bidimensionnel. Vous pouvez également définir les coordonnées de l'axe z pour changer la position dans l'espace tridimensionnel.

Les coordonnées peuvent ne comporter que des coordonnées de l'axe x, des coordonnées de l'axe x et de l'axe y, ou des coordonnées de l'axe x, de l'axe y et de l'axe z.

Pour mieux comprendre translate Pour plus d'informations sur la propriétéDémonstration.

Astuce :Pour que les propriétés de l'axe z fonctionnent, vous devez définir une valeur pour la propriété CSS perspective.

Note :Une autre technique pour déplacer les éléments est d'utiliser Fonction translate() CSS La propriété CSS transform de cette page est une méthode plus simple et plus directe pour déplacer les éléments.

Exemple

Exemple 1

Modifier la position de l'élément :

div {
  translate: 100px 20px;
}

Essayez-le vous-même

Exemple 2

Lorsque vous définissez l'axe z de translate Il est nécessaire de définir cette propriété sur l'élément parent également lorsque vous définissez perspective Nous ne pouvons voir aucun effet que si nous définissons cette propriété :

DIV1 {
  perspective: 200px;
}
DIV2 {
  translate: 50px 50px 50px;
}

Essayez-le vous-même

Syntaxe CSS

translate: x-axis y-axis z-axis|initial|inherit;

Valeur de l'attribut

Valeur Description
x-axis

Définit la position sur l'axe x. Les valeurs possibles sont :

  • Longueur
  • Pourcentage
y-axis

Définit la position sur l'axe y. Les valeurs possibles sont :

  • Longueur
  • Pourcentage
z-axis

Définit la position sur l'axe z. Les valeurs possibles sont :

  • Longueur
  • Pourcentage
initial Réinitialise cette propriété à sa valeur par défaut. Voir initial.
inherit Inhérite cette propriété de l'élément parent. Voir inherit.

Détails techniques

Valeur par défaut : none
Héritabilité : Non
Création d'animation : Pris en charge. Voir :Propriétés liées aux animations.
Version : CSS3
Syntaxe JavaScript : object.style.translate="10px 20px"

Prise en charge du navigateur

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

Chrome Edge Firefox Safari Opera
104 104 72 14.1 90

Pages associées

Tutoriel CSS :Transformation 2D CSS

Tutoriel CSS :Transformation 3D CSS

Référence CSS :Attribut scale de CSS

Référence CSS :Attribut rotate de CSS

Référence CSS :Attribut perspective de CSS