translate()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

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

La valeur obtenue par cette fonction est de type <transform-function>.

Syntaxe

css

/* Avec une seule valeur <length-percentage> */
transform: translate(200px);
transform: translate(50%);

/* Avec deux valeurs <length-percentage> */
transform: translate(100px, 200px);
transform: translate(100px, 50%);
transform: translate(30%, 200px);
transform: translate(30%, 50%);

Valeurs

Avec une seule valeur <length-percentage>: Cette valeur est de type <length> ou <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.
Avec deux valeurs <length-percentage>: Ces valeurs sont de type <length> ou <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).

Coordonnées cartésiennes sur ℝ²	Coordonnées homogènes sur ℝℙ²	Coordonnées cartésiennes sur ℝ³	Coordonnées homogènes sur ℝℙ³
Une translation plane n'est pas une transformation linéaire de ℝ² et ne peut donc pas être représentée sous la forme d'une matrice dans le système cartésien.	$(\begin{matrix} 1 & 0 & tx \\ 0 & 1 & ty \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} 1 & 0 & tx \\ 0 & 1 & ty \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} 1 & 0 & 0 & tx \\ 0 & 1 & 0 & ty \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{matrix})$
	`[1 0 0 1 tx ty]`

Exemples

Définir une translation horizontale

HTML

html

<div>Statique</div>
<div class="moved">Déplacé</div>
<div>Statique</div>

CSS

css

div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  /* Équivalent à : translateX(10px) ou translate(10px, 0) */
  transform: translate(10px);
  background-color: pink;
}

Résultat

Définir une translation sur les deux axes

HTML

html

<div>Statique</div>
<div class="moved">Déplacé</div>
<div>Statique</div>

CSS

css

div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  transform: translate(10px, 10px);
  background-color: pink;
}

Résultat

Spécifications

Specification
CSS Transforms Module Level 1 # funcdef-transform-translate

Compatibilité des navigateurs

BCD tables only load in the browser