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
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. |
|||
[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
Spécifications
Spécification | État | Commentaires |
---|---|---|
CSS Transforms Level 1 La définition de 'translateY()' dans cette spécification. |
Version de travail | Définition initiale. |
Compatibilité des navigateurs
Voir la page sur le type de donnée <transform-function>
pour les informations de compatibilité associées.