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; }
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; }
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 :
|
y-axis |
Définit la position sur l'axe y. Les valeurs possibles sont :
|
z-axis |
Définit la position sur l'axe z. Les valeurs possibles sont :
|
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
- page précédente transition-timing-function
- Page suivante unicode-bidi