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.

10t010001 10t010001 100t010000100001
[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

Contributeurs à cette page : SphinxKnight, mrstork
Dernière mise à jour par : SphinxKnight,