translate()
La fonction translate() permet de déplacer un élément sur le plan représenté par le document. Cette transformation est définie à l'aide d'un vecteur dont les coordonnées définissent la quantité de déplacement sur chaque axe (horizontal et vertical).La fonction translate() peut prendre une ou deux valeurs, translate(tx) ou translate(tx, ty). translate(tx) est éuivalent à translate(tx, 0).
- tx représente l'abscisse du vecteur de translation. Autrement dit, c'est l'amplitude du déplacement horizontal de la translation.
- ty représente l'ordonnée du vecteur de translation. Autrement dit, c'est l'amplitude du déplacement vertical de la translation.
<style>
.fond {
width: 300px;
height: 240px;
border: 1px dotted black;
}
.rect {
width: 200px;
height: 150px;
background-color: gray;
}
.rect#trans {
transform: translate(100px, 90px);
}
</style>
<div class="fond">
<div class="rect"></div>
</div>
<br>
<div class="fond">
<div class="rect" id="trans"></div>
</div>