translateX() CSS fonction

Définition de la CSS translateX().

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

Exemple de syntaxe CSS translateX() :
transform : translateX(20px);
// identique à
transform : translate(20px, 0);
La fonction de Translation CSS translateX(X) accepte comme argument de déplacement :
Tester en directune translation horizontale avec la fonction translateX() CSS.

Conditions d'application de la CSS translateX().

La fonction de Translation CSS translateX() est applicable avec la propriété de Transformation CSS et avec ses propriétés de Transformation préfixées (, , ).

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

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

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

Conditions d'animation de translateX() en CSS3.

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

La CSS translateX() 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 translateX().

Calcul des valeurs Css de translateX() en %

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

Point d'origine par défaut

schémat de translationLe 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 . Cependant, le changement du point d'origine n'a pas d'effet sur les translations.

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

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

Equivalence CSS translateX/matrix :
transform : matrix(1, 0, 0, 1, deplacementX, 0);
//deplacementX est implicitement exprimé en px

Valeur à remplacer :

  • deplacementX, nombre sans unité représentant le décalage horizontal en pixel.
Contrairement à la fonction de Translation CSS translateX(), on ne peut pas spécifier l'unité de longueur dans la fonction de Matrice CSS matrix() CSS.

Compatibilités navigateurs de la fonction translateX()

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

Votez pour la définition CSS translateX()

  • 1/5
  • 2/5
  • 3/5
  • 4/5
  • 5/5

Avis sur la page https://www.zonecss.fr/proprietes-css/translatex-css-fonction.html Votes: 4.4 / 5 - 18 votes
Cliquez sur une étoile pour voter.