translateY() CSS fonction

Définition de la CSS translateY().

La fonction de Translation CSS translateY() de la propriété de Transformation CSS transform permet de déplacer verticalement un élément HTML par rapport à sa position d'origine. .

Exemple de syntaxe CSS translateY() :

transform : translateY(20px);
// identique à
transform : translate(0, 20px);

La fonction de Translation CSS translateY(Y) accepte comme argument de déplacement :

Y : nombre représentant la translation verticale suivi d'une unité CSS de longueur ou de % (pourcentage)
Si Y est égale à 0 c'est la position d'origine.

Tester en direct une translation verticale avec la fonction translateY() CSS.

Exemple de code translateY() CSS

Conditions d'application de la CSS translateY().

La fonction de Translation CSS translateY() est applicable avec la propriété de Transformation CSS transform et avec ses propriétés de Transformation préfixées (-moz-transform, -webkit-transform, -ms-transform).

La valeur de la CSS translateY() peut être mise directement dans la fonction de raccourci CSS translate() ou translate3d().

Problème d'interprétation de translateY() en Css.

La propriété de Transformation CSS transform n'est reconnue par certains navigateurs.

Conditions d'animation de translateY() en CSS3.

Mettez transform comme valeur de la propriété de Transformation CSS transition-property.

La CSS translateY() est une fonction de feuille de style qui peut être utilisée pour les animations CSS et transitions CSS.

Règles de syntaxes CSS pour translateY().

Calcul des valeurs Css de translateY() en %

Pour X, la valeur est calculée en fonction de la valeur calculée de sa propriété CSS width.
Pour Y, la valeur est calculée en fonction de la valeur calculée de sa propriété CSS height.

Point d'origine par défaut

schémat de translation Le point d'origine par défaut de la translation correspond au centre de votre élément (50%,50%). Il peut être modifier avec la CSS transform-origin. Cependant, le changement du point d'origine n'a pas d'effet sur les translations.

Equivalence fonction de Matrice matrix() pour les déplacement en px

Pour décaler verticalement un élément, vous pouvez aussi utiliser la fonction de Matrice CSS matrix() à la place de la fonction de Translation CSS translateY().

Equivalence CSS translateY/matrix :

transform : matrix(1, 0, 0, 1, 0, deplacementY);
//deplacementY est implicitement exprimé en px

Valeurs à remplacer :

deplacementY, nombre sans unité représentant le décalage vertical en pixel.

Contrairement à la fonction de Translation CSS translateY(), on ne peut pas spécifier l'unité de longueur dans la fonction de Matrice CSS matrix() CSS.

Compatibilités navigateurs de la fonction translateY()

Détails des versions de la CSS translateY(): Fonction translateY() est compatible avec CSS3 et plus.

Résumé du support navigateurs de la CSS translateY(): Fonction CSS translateY() est compatible à partir de Chrome 1; Fonction CSS translateY() est compatible à partir de Firefox 3.5; Fonction CSS translateY() est compatible à partir de Internet Explorer 9; Fonction CSS translateY() est compatible à partir de Opera 10.5; Fonction CSS translateY() est compatible à partir de Safari 3.1

Votre avis sur la définition translateY() en CSS

Votez pour la définition CSS `translateY()`

Votes: 4.5 / 5 - 11 votes
Cliquez sur une étoile pour voter.

Définitions annexes à la Css translateY()

Définitions CSS annexes translateY()

-moz-transform: La propriété de Transformation CSS -MOZ-TRANSFORM permet de spécifier les transformations 2D et 3D à appliquer à un élément HTML.Exemple d'écriture CS...[ -moz-transform ]
-ms-transform: La propriété de Transformation CSS -MS-TRANSFORM permet de spécifier les transformations 2D à appliquer sur un élément HTML. Exemple d'écriture CSS de...[ -ms-transform ]
-webkit-transform: La propriété de Transformation CSS -WEBKIT-TRANSFORM permet de spécifier les transformations 2D ou 3D à appliquer à un élément HTML. Exemple d'écritur...[ -webkit-transform ]
height: La propriété de Hauteur CSS HEIGHT permet de spécifier la hauteur de la zone de contenu d'un élément (X)HTML dit de type block. Exemple d'écriture CSS...[ height ]
matrix(): La fonction de Matrice CSS MATRIX() de la propriété de Transformation CSS transform permet d'incliner, changer l'échelle, faire une rotation, déplacer...[ matrix() ]
transform: La propriété de Transformation CSS TRANSFORM permet de spécifier le type de transformation 2d ou 3d à appliquer sur un élément HTML.Exemple d'écriture...[ transform ]
transform-origin: La propriété de Transformation CSS TRANSFORM-ORIGIN permet de spécifier le point d'origine des transformations 2d ou 3d lors de l'utilisation de la pr...[ transform-origin ]
transition-property: La propriété de Transition CSS TRANSITION-PROPERTY permet de spécifier les propriétés CSS qui doivent être transformées au moment du changement de leu...[ transition-property ]
translate(): La fonction de Translation CSS TRANSLATE() de la propriété de Transformation CSS transform permet de déplacer horizontalement et/ou déplacer verticale...[ translate() ]
translate3d(): La fonction de Translation CSS translate3d() de la propriété de Transformation CSS transform permet de spécifier les déplacements d'un élément HTML pa...[ translate3d() ]
width: La propriété de Longueur CSS WIDTH permet de spécifier la longueur de la zone de contenu d'un élément (X)HTML dit de type block. Exemple d'écriture CS...[ width ]