translate()
Baseline Widely available
This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 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
/* 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 0 1 tx ty] |
Exemples
Définir une translation horizontale
HTML
<div>Statique</div>
<div class="moved">Déplacé</div>
<div>Statique</div>
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
<div>Statique</div>
<div class="moved">Déplacé</div>
<div>Statique</div>
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 |