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 ℝ²	Coordonnées homogènes sur ℝℙ²	Coordonnées cartésiennes sur ℝ³	Coordonnées homogènes sur ℝℙ³
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 ℝ³ et ne peut donc pas être représentée par une matrice dans le système cartésien.	$(\begin{matrix} 1 & 0 & 0 & tx \\ 0 & 1 & 0 & ty \\ 0 & 0 & 1 & tz \\ 0 & 0 & 0 & 1 \end{matrix})$

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