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

rotate()

La fonction rotate() définit une transformation qui déplace un élément autour d'un point fixe (défini par la propriété transform-origin) sans le déformer. C'est une rotation autour de ce point. La rotation plane est définie par un angle, l'argument de la fonction, si l'angle indiqué est positif, le mouvement sera appliqué dans le sens horaire et sinon il sera appliqué dans le sens inverse des aiguilles d'une montre.

Par défaut l'origine de la rotation est positionnée aux coordonnées 50%-50%. La fonction accepte une valeur ui doit être exprimée en degrés (deg).


<style>
.carre {
  margin-left: 40px;
  width: 200px;
  height: 200px;
  background-color: royalblue;
}
.carre#rotat {
  transform: rotate(135deg);
}
</style>

<div class="carre"></div>
<br><br><br>
<div class="carre" id="rotat"></div>