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 directionn.

Syntaxe

translate3d(tx, ty, tz)

Valeur

tx

Une valeur de type <length> qui représente l'abscisse du vecteur de translation (équivalente au déplacement horizontal).

ty

Une valeur de type <length> 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.

Exemples

Définir une translation sur un seul axe

HTML

<p>toto</p>
<p class="transformation">truc</p>
<p>toto</p>

CSS

p { 
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformation {
  transform: perspective(500px) translate3d(10px,0px,0px);
  /* equivalent to perspective(500px) translateX(10px)*/
  background-color: blue;
}

Résultat

Définir une translation sur les axes X et Z

HTML

<p>toto</p>
<p class="transformation">truc</p>
<p>toto</p>

CSS

p { 
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformation {
  transform: perspective(500px) translate3d(10px,0px,100px);
  background-color: blue;
}

Résultat