Fonction CSS `translate3d()`

Baseline Large disponibilit

Cette fonctionnalit est bien tablie et fonctionne sur de nombreux appareils et versions de navigateurs. Elle est disponible sur tous les navigateurs depuis juillet 2015.

En savoir plus
Voir la compatibilit complte

La fonction CSS translate3d() repositionne un lment dans l'espace 3D. Son rsultat est de type <transform-function>.

Exemple interactif

transform: translate3d(0, 0, 0);

transform: translate3d(42px, -62px, -135px);

transform: translate3d(-2.7rem, 0, 1rem);

transform: translate3d(5ch, 0.4in, 5em);

<section class="default-example" id="default-example">
  <div class="transition-all" id="example-element">
    <div class="face front">1</div>
    <div class="face back">2</div>
    <div class="face right">3</div>
    <div class="face left">4</div>
    <div class="face top">5</div>
    <div class="face bottom">6</div>
  </div>
</section>

#default-example {
  background: linear-gradient(skyblue, khaki);
  perspective: 800px;
  perspective-origin: 150% 150%;
}

#example-element {
  width: 100px;
  height: 100px;
  perspective: 550px;
  transform-style: preserve-3d;
}

.face {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  position: absolute;
  backface-visibility: inherit;
  font-size: 60px;
  color: white;
}

.front {
  background: rgb(90 90 90 / 0.7);
  transform: translateZ(50px);
}

.back {
  background: rgb(0 210 0 / 0.7);
  transform: rotateY(180deg) translateZ(50px);
}

.right {
  background: rgb(210 0 0 / 0.7);
  transform: rotateY(90deg) translateZ(50px);
}

.left {
  background: rgb(0 0 210 / 0.7);
  transform: rotateY(-90deg) translateZ(50px);
}

.top {
  background: rgb(210 210 0 / 0.7);
  transform: rotateX(90deg) translateZ(50px);
}

.bottom {
  background: rgb(210 0 210 / 0.7);
  transform: rotateX(-90deg) translateZ(50px);
}

Cette transformation est caractrise par un vecteur tridimensionnel [tx, ty, tz]. Ses coordonnes dfinissent de combien l'lment se dplace dans chaque direction.

Syntaxe

css

translate3d(tx, ty, tz)

Valeurs

tx: Est une longueur (<length>) ou un pourcentage (<percentage>) reprsentant l'abscisse (composante horizontale, x) du vecteur de dplacement [tx, ty, tz].
ty: Est une longueur (<length>) ou un pourcentage (<percentage>) reprsentant l'ordonne (composante verticale, y) du vecteur de dplacement [tx, ty, tz].
tz: Est une longueur (<length>) reprsentant la composante z du vecteur de dplacement. Elle ne peut pas tre une valeur <percentage> ; dans ce cas, la proprit contenant la transformation est considre comme invalide [tx, ty, tz].

Coordonnes cartsiennes sur ^2 (angl.)	Coordonnes homognes sur ^2	Coordonnes cartsiennes sur ^3 (angl.)	Coordonnes homognes sur ^3 (angl.)
Cette transformation s'applique l'espace 3D et ne peut pas tre reprsente sur le plan.		Un dplacement n'est pas une transformation linaire dans ^3 et ne peut pas tre reprsent par une matrice de coordonnes cartsiennes.	(100tx010ty001tz0001)\left( \begin{array}{cccc} 1 & 0 & 0 & tx \\ 0 & 1 & 0 & ty \\ 0 & 0 & 1 & tz \\ 0 & 0 & 0 & 1 \end{array} \right)

Syntaxe formelle

<translate3d()> = 
  translate3d( <length-percentage> , <length-percentage> , <length> )  

<length-percentage> = 
  <length>      |
  <percentage>

Cette syntaxe reflte le dernier standard selon CSS Transforms Module Level 2, CSS Values and Units Module Level 4. Tous les navigateurs n'ont peut-tre pas implment toutes les parties. Voir la Compatibilit des navigateurs pour plus d'informations sur la prise en charge.

Exemples

Utiliser un dplacement sur un seul axe

HTML

html

<div>Statique</div>
<div class="moved">Dplac</div>
<div>Statique</div>

CSS

css

div {
  width: 60px;
  height: 60px;
  background-color: skyblue;
}

.moved {
  /* quivaut  : perspective(500px) translateX(10px) */
  transform: perspective(500px) translate3d(10px, 0, 0px);
  background-color: pink;
}

Rsultat

Combiner un dplacement sur l'axe z et l'axe x

HTML

html

<div>Statique</div>
<div class="moved">Dplac</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;
}