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
transform: translate3d(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: rgba(90, 90, 90, 0.7);
transform: translateZ(50px);
}
.back {
background: rgba(0, 210, 0, 0.7);
transform: rotateY(180deg) translateZ(50px);
}
.right {
background: rgba(210, 0, 0, 0.7);
transform: rotateY(90deg) translateZ(50px);
}
.left {
background: rgba(0, 0, 210, 0.7);
transform: rotateY(-90deg) translateZ(50px);
}
.top {
background: rgba(210, 210, 0, 0.7);
transform: rotateX(90deg) translateZ(50px);
}
.bottom {
background: rgba(210, 0, 210, 0.7);
transform: rotateX(-90deg) translateZ(50px);
}
La valeur obtenue par cette fonction est de type <transform-function>.
Syntaxe
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
<div>Statique</div>
<div class="moved">Déplacé</div>
<div>Statique</div>
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
<div>Statique</div>
<div class="moved">Déplacé</div>
<div>Statique</div>
CSS
div {
width: 60px;
height: 60px;
background-color: skyblue;
}
.moved {
transform: perspective(500px) translate3d(10px, 0, 100px);
background-color: pink;
}