translateY()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

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>.

Exemple interactif

Note : translateY(ty) est équivalent à translate(0, ty) ou translate3d(0, ty, 0).

Syntaxe

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

Valeurs

<length-percentage>

Valeur de type <length> ou <percentage> représentant l'ordonnée (verticale, coordonnée y) du vecteur de translation [0, ty]. Dans le système de coordonnées cartésiennes, elle représente le déplacement le long de l'axe y. Une valeur en pourcentage fait référence à la hauteur de la boîte de référence définie par la propriété transform-box.

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]

Syntaxe formelle

css
translateY(<length-percentage>)

Exemples

HTML

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

CSS

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