translate3d() CSS fonction

Définition de la CSS 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 par rapport à sa position d'origine, sur les trois axes de perspective 3D.

transform : translate3d(20px, 21pt, 2em);
transform : translate3d(20px, 0, 0);
// identique à
transform : translateX(20px);
transform : translate3d(0, 20px, 0);
// identique à
transform : translateY(20px);
transform : translate3d(0, 0, 20px);
// identique à
transform : translateZ(20px);

• X : nombre positif ou négatif suivi d'une unité CSS de longueur ou de % (pourcentage), représentant la translation sur l'axe X.
• Y : nombre positif ou négatif suivi d'une unité CSS de longueur ou de %, représentant la translation sur l'axe Y.
• Z : nombre positif ou négatif suivi d'une unité CSS de longueur (sauf %), représentant la translation sur l'axe Z.
• Si le nombre est égal à 0, c'est la position d'origine sur l'axe concerné.

Exemple de code translate3d() CSS

Conditions d'application de la CSS translate3d().

La fonction de Translation CSS translate3d() 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).

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

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

Conditions d'animation de translate3d() en CSS3.

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

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