translate3d()
La fonction CSS translate3d()
permet de déplacer un élément dans l'espace tridimensionnel. Cette transformation est définie à l'aide d'un vecteur dont les coordonnées définissent l'amplitude du déplacement pour chaque direction.
Exemple interactif
La valeur obtenue par cette fonction est de type <transform-function>
.
Syntaxe
css
translate3d(tx, ty, tz)
Valeurs
tx
-
Une valeur de type
<length>
ou<percentage>
qui représente l'abscisse du vecteur de translation (équivalente au déplacement horizontal). ty
-
Une valeur de type
<length>
ou<percentage>
qui représente l'ordonnée du vecteur de translation (équivalente au déplacement vertical). tz
-
Une valeur de type
<length>
qui représente la composante en profondeur du vecteur de translation (équivalente au déplacement en profondeur). La valeur ne peut pas être de type<percentage>
, si c'est le cas, la règle décrivant la transformation sera considérée comme invalide.
Coordonnées cartésiennes sur ℝ2 | Coordonnées homogènes sur ℝℙ2 | Coordonnées cartésiennes sur ℝ3 | Coordonnées homogènes sur ℝℙ3 |
---|---|---|---|
Cette transformation s'applique en trois dimensions et ne peut donc être représentée sur le plan. |
Une translation n'est pas une transformation linéaire de ℝ3 et ne peut donc pas être représentée par une matrice dans le système cartésien. |
Exemples
Définir une translation sur un seul axe
HTML
html
<div>Statique</div>
<div class="moved">Déplacé</div>
<div>Statique</div>
CSS
css
div {
width: 60px;
height: 60px;
background-color: skyblue;
}
.moved {
transform: perspective(500px) translate3d(10px, 0px, 0px);
/* Équivalent à perspective(500px) translateX(10px)*/
background-color: pink;
}
Résultat
Définir une translation sur les axes X et Z
HTML
html
<div>Statique</div>
<div class="moved">Déplacé</div>
<div>Statique</div>
CSS
css
div {
width: 60px;
height: 60px;
background-color: skyblue;
}
.moved {
transform: perspective(500px) translate3d(10px, 0, 100px);
background-color: pink;
}
Résultat
Spécifications
Specification |
---|
CSS Transforms Module Level 2 # funcdef-translate3d |
Compatibilité des navigateurs
BCD tables only load in the browser