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