translate3d()
La fonction 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.Trois valeurs (des longueurs) sont nécessaires à la fonction translate3d() :
- tx qui représente l'abscisse du vecteur de translation (équivalente au déplacement horizontal).
- ty qui représente l'ordonnée du vecteur de translation (équivalente au déplacement vertical).
- tz qui représente la composante en profondeur du vecteur de translation (équivalente au déplacement en profondeur). La valeur ne peut pas être un pourcentage, si c'est le cas, la règle décrivant la transformation sera considérée comme invalide.
<style>
.fond {
perspective: 800px;
width: 360px;
height: 300px;
border: 1px dotted black;
}
.rect {
width: 100px;
height: 60px;
background-color: cornflowerblue;
}
.rect#trans {
transform: translate3d(100px, 90px, -200px);
}
</style>
<div class="fond">
<div class="rect"></div>
</div>
<br>
<div class="fond">
<div class="rect" id="trans"></div>
</div>