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).
Syntaxe
/* 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
ou
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
-
Ces valeurs sont de type
ou
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
Statique
Déplacé
Statique
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
Statique
Déplacé
Statique
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 |