translateX()

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.

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

Étiquettes et contributeurs liés au document

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