--- title: translate() slug: Web/CSS/transform-function/translate translation_of: Web/CSS/transform-function/translate() original_slug: Web/CSS/transform-function/translate() browser-compat: css.types.transform-function.translate --- {{CSSRef}} La fonction **`translate()`** permet de déplacer un élément sur le plan représenté par le document. Cette transformation est définie à l'aide d'un vecteur dont les coordonnées définissent la quantité de déplacement sur chaque axe (horizontal et vertical). ![](translate.png) La valeur obtenue par cette fonction est de type [``](/fr/docs/Web/CSS/transform-function). ## Syntaxe ```css /* Avec une seule valeur */ transform: translate(200px); transform: translate(50%); /* Avec deux valeurs */ transform: translate(100px, 200px); transform: translate(100px, 50%); transform: translate(30%, 200px); transform: translate(30%, 50%); ``` ### Valeurs - Avec une seule valeur `` - : Cette valeur est de type [``](/fr/docs/Web/CSS/length) ou [``](/fr/docs/Web/CSS/percentage) et représente l'abscisse (la coordonnée horizontale) du vecteur de translation. La composante verticale du vecteur de translation sera nulle. Ainsi, `translate(2px)` est équivalent à `translate(2px, 0)`. Une valeur en pourcentage sera relative à la largeur de la boîte de référence définie par la propriété [`transform-box`](/fr/docs/Web/CSS/transform-box). - Avec deux valeurs `` - : Ces valeurs sont de type [``](/fr/docs/Web/CSS/length) ou [``](/fr/docs/Web/CSS/percentage) et décrivent respectivement l'abscisse (la coordonnée horizontale) et l'ordonnée (la coordonnée verticale) du vecteur de translation. Un premier pourcentage sera relatif à la largeur de la boîte de référence et un deuxième pourcentage sera relatif à sa hauteur (la boîte de référence étant définie par la propriété [`transform-box`](/fr/docs/Web/CSS/transform-box)).
Coordonnées cartésiennes sur ℝ2 Coordonnées homogènes sur ℝℙ2 Coordonnées cartésiennes sur ℝ3 Coordonnées homogènes sur ℝℙ3

Une translation plane n'est pas une transformation linéaire de ℝ2 et ne peut donc pas être représentée sous la forme d'une matrice dans le système cartésien.

10tx01ty001 10tx01ty001 100tx010ty00100001
[1 0 0 1 tx ty]
## Exemples ### Définir une translation horizontale #### HTML ```html
Statique
Déplacé
Statique
``` #### CSS ```css div { width: 60px; height: 60px; background-color: skyblue; } .moved { transform: translate(10px); /* Équivalent à : translateX(10px) ou translate(10px, 0) */ background-color: pink; } ``` #### Résultat {{EmbedLiveSample("Définir_une_translation_horizontale","100%","250")}} ### Définir une translation sur les deux axes #### HTML ```html
Statique
Déplacé
Statique
``` #### CSS ```css div { width: 60px; height: 60px; background-color: skyblue; } .moved { transform: translate(10px, 10px); background-color: pink; } ``` #### Résultat {{EmbedLiveSample("Définir_une_translation_sur_les_deux_axes","100%","250")}} ## Spécifications {{Specifications}} ## Compatibilité des navigateurs {{Compat}} ## Voir aussi - [`transform`](/fr/docs/Web/CSS/transform) - [``](/fr/docs/Web/CSS/transform-function)