La fonction translateX() permet de déplacer un élément horizontalement. Cette transformation est caractérisée par une longueur (type <length>) qui définit l'amplitude du mouvement horizontal. La valeur obtenue par cette fonction est de type <transform-function>.
translateX(tx) est une notation raccourcie équivalente à translate(tx, 0).
Syntaxe
translateX(t)
Valeurs
t- Une valeur de type
<length>qui représente l'abscisse (la coordonnée en X) du vecteur de translation.
| 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 n'est pas une transformation linéaire sur ℝ2 et on ne peut donc pas la représenter en utilisant une matrice exprimée dans le système cartésien. |
|||
[1 0 0 1 t 0] |
Exemples
HTML
<p>toto</p> <p class="transformation">truc</p> <p>toto</p>
CSS
p {
width: 50px;
height: 50px;
background-color: teal;
}
.transformation {
transform: translateX(10px);
background-color: blue;
}
Résultat
Compatibilité des navigateurs
Voir la page sur le type de donnée <transform-function> pour les informations de compatibilité associées.
Voir aussi
Étiquettes et contributeurs liés au document
Étiquettes :
Contributeurs à cette page :
SphinxKnight,
mrstork
Dernière mise à jour par :
SphinxKnight,