La fonction de Translation CSStranslateX() de la propriété de Transformation CSStransform 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 :
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
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 CSS matrix() pour les déplacements en px
Pour décaler horizontalement un élément, vous pouvez aussi utiliser la fonction de Matrice CSS matrix() à 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()
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