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
translate(tx) translate(tx, ty)
Valeurs
tx
- Une valeur de type
<length>
qui représente l'abscisse du vecteur de translation. Autrement dit, c'est l'amplitude du déplacement horizontal de la translation. ty
- Une valeur de type
<length>
qui représente l'ordonnée du vecteur de translation. Autrement dit, c'est l'amplitude du déplacement vertical de la translation. Si ce paramètre n'est pas utilisé, la valeur par défaut sera 0 :translate(2)
sera donc équivalent àtranslate(2, 0)
.
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
<p>toto</p>
<p class="transformation">truc</p>
<p>toto</p>
CSS
p {
width: 50px;
height: 50px;
background-color: teal;
}
.transformation {
transform: translate(10px);
/* équivalent à translateX(10px)*/
background-color: blue;
}
Résultat
Définir une translation sur les deux axes
HTML
<p>toto</p>
<p class="transformation">truc</p>
<p>toto</p>
CSS
p {
width: 50px;
height: 50px;
background-color: teal;
}
.transformation {
transform: translate(10px,10px);
background-color: blue;
}
Résultat
Spécifications
Spécification | État | Commentaires |
---|---|---|
CSS Transforms Level 1 La définition de 'translate()' dans cette spécification. |
Version de travail | Définition initiale. |
Compatibilité des navigateurs
Voir la page sur le type de donnée <transform-function>
pour les informations de compatibilité associées.