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

rotatez()

La fonction rotatez() définit une transformation qui déplace l'élément autour de l'axe Z, sans déformer cet élément. L'angle de rotation est défini par l'argument passé à 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.

L'axe de la rotation passe par l'origine du repère, définie par la propriété transform-origin.

La notation rotatez(α) est une notation raccourcie équivalente à rotate3d(0, 0, 1, α).


<style>
.fond {
  width: 200px;
  height: 200px;
  margin-left: 35px;
  border: 1px dotted black;
  perspective: 800px;
}
.carre {
  width: 200px;
  height: 200px;
  background-color: darkorange;
}
.carre#rotat {
  transform: rotatez(60deg);
}
</style>

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