translateX()
, translateY()
, translateZ()
et translate3d()
Résumé des caractéristiques de la fonction translate()
Description des fonctions de translation.
Les fonctions translateX()
, translateY()
, translateZ()
, utilisées avec la propriété transform
appliquent applique une translation, c'est à dire un déplacement linéaire, à un élément, suivant l'un des axes.
- Axe
X
: déplacement horizontal. - Axe
Y
: déplacement vertical. - Axe
Z
: déplacement perpendiculaire à la surface de l'écran.
La fonction translate()
permet une translation en 3D, suivant un ou plusieurs des axes X, Y et Z.
C'est donc un raccourci qui peut remplacer les trois fonctions translateX()
, translateY()
et translateZ()
.
Les fonctions de translation peuvent être utilisées avec :
transform
: Applique une ou plusieurs transformations géométriques (rotations, agrandissements, etc.).
Syntaxe de la fonction translate()
.
- transform: translateX(100px); x transform: translateY(5px); y transform: translateZ(5px); z transform: translate3d(100px, 5px, 5px); x y z
x
,y
etz
définissent la distance de déplacement respectivement suivant les axes X, Y et Z. Ce sont trois valeurs numériques positives ou négatives suivies de leur unité (voir les unités CSS de dimension).x
ety
peuvent également être indiqués en pourcentages, ceux-ci sont alors calculés par rapport à la largeur et à la hauteur de l'élément.z
doit être indiqué dans une unité absolue (px
,cm
, etc).Pour la fonction
translate()
, les trois valeurs doivent obligatoirement être indiquées. - transform: translate(100px, 200px); x y transform: translate3d(100px, 5px, 5px); x y z
translate()
est un raccourci pourtranslateX()
ettranslateY()
. Si une seule valeur est indiquée, elle est appliquée à l'axeX
, aucun déplacement n'est effectué suivant l'axeY
.[} est un raccourci qui permet de définir en une seule écriture les déplacements suivant les trois axes. Curieusement, les trois valeurs sont ici obligatoires.
Simulateur.
Remarque : pour que les translations suivant l'axe Z soient visible, le simulateur applique également la fonction perspective()
.
Compatibilité et prise en charge par les navigateurs.
Tous les navigateurs actuels traitent correctement les transformations en 3D.
Les fonctions CSS translate()
, translateX()
, translateY()
, translateZ()
sont également
bien prises en charge.
translate()
, translateX()
et translateY()
.
translate3d()
et translateZ()
.
translate()
translate3d()
Navigateurs sur ordinateurs :
Navigateurs sur mobiles :
Navigateurs obsolètes ou marginaux :
Androïd Brower
Baidu Browser
Chrome
Chrome pour Androïd
Edge
Firefox
Firefox pour Androïd
Internet Explorer
KaiOS Browser
Opéra
Opéra Mobile
QQ Browser
Safari
Safari sur IOS
Samsung Internet
Oméra mini
Voir aussi, dans le même module de standardisation que translate()
.
Les spécifications CSS éditées par le W3C sont organisées en modules. translate()
fait partie du Module CSS - Transformations (CSS Transforms Module). Les définitions suivantes sont également décrites dans ce même module.