translateY()

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

/* Valeurs de type <length-percentage> */
transform: translateY(200px);
transform: translateY(50%);

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.

1 0 0 0 1 t 0 0 1 1 0 0 0 1 t 0 0 1 1 0 0 0 0 1 0 t 0 0 1 0 0 0 0 1
[1 0 0 1 0 t]

Syntaxe formelle

translateY([`<length-percentage>`](/fr/docs/Web/CSS/length-percentage))

Exemples

HTML

<div>Statique</div>
<div class="moved">Déplacé</div>
<div>Statique</div>

CSS

div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  transform: translateY(10px);
  background-color: pink;
}

Résultat

Spécifications

Specification
CSS Transforms Module Level 1
# funcdef-transform-translatey

Compatibilité des navigateurs

BCD tables only load in the browser

Voir aussi