Cette page a été traduite à partir de l'anglais par la communauté. Vous pouvez contribuer en rejoignant la communauté francophone sur MDN Web Docs.
translateY()
Baseline
Widely available
Cette fonctionnalité est bien établie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 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
transform: translateY(0);
transform: translateY(42px);
transform: translateY(-2.1rem);
transform: translateY(3ch);
<section id="default-example">
<img
class="transition-all"
id="static-element"
src="/shared-assets/images/examples/firefox-logo.svg"
width="200" />
<img
class="transition-all"
id="example-element"
src="/shared-assets/images/examples/firefox-logo.svg"
width="200" />
</section>
#static-element {
opacity: 0.4;
position: absolute;
}
#example-element {
position: absolute;
}
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 R2 | Coordonnées homogènes sur RP2 | Coordonnées cartésiennes sur R3 | Coordonnées homogènes sur RP3 |
|---|---|---|---|
|
Une translation n'est pas une transformation linéaire sur R2 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
Chargement...