Faire son site 11 : Référence CSS - translatex()

translatex()

La fonction translatex() permet de déplacer un élément horizontalement. Cette transformation est caractérisée par une longueur qui définit l'amplitude du mouvement horizontal.

La notation translatex(tx) est une notation abrégée pour translate(tx, 0).

- tx représente l'abscisse du vecteur de translation.


<style>
.fond {
  width: 400px;
  height: 200px;
  border: 1px dotted black;
}
.rect {
  width: 120px;
  height: 120px;
  background-color: crimson;
}
.rect#trans {
  transform: translatex(280px);
}
</style>
<div class="fond">
  <div class="rect"></div>
</div>
<br>

<div class="fond">
  <div class="rect" id="trans"></div>
</div>