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>
.
Exemple interactif
Note : translateY(ty)
est équivalent à translate(0, ty)
ou translate3d(0, ty, 0)
.
Syntaxe
/* 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. |
|
||
[1 0 0 1 0 t] |
Syntaxe formelle
translateY(<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