Propriété translate CSS

page précédente transition-timing-function
Page suivante unicode-bidi

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"