La fonction translateY() permet de déplacer un élement verticalement sur le plan. Cette transformation est caractérisée par une longueur (type <length>) qui définit l'amplitude du déplacement. La valeur obtenue par cette fonction est de type <transform-function>.

translateY(ty) est une notation raccourcie équivalente à translate(0, ty).

Syntaxe

translateY(t)

Valeurs

t
Une valeur de type <length> qui représente l'ordonnée du vecteur de translation (la composante en Y).
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.

10001t001 10001t001 1000010t00100001
[1 0 0 1 0 t]

Exemples

HTML

<p>toto</p>
<p class="transformation">truc</p>
<p>toto</p>

CSS

p { 
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformation {
  transform: translateY(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,