translate()

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

1 0 tx 0 1 ty 0 0 1 1 0 tx 0 1 ty 0 0 1 1 0 0 tx 0 1 0 ty 0 0 1 0 0 0 0 1
[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

Voir aussi