rotatex()
La fonction rotatex() définit une transformation qui déplace l'élément autour de l'axe des abscisses sans le déformer é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 rotatex(α) est une notation raccourcie, équivalente à rotate3d(1, 0, 0, α).
La valeur acceptée par la fonction rotatex() représente l'angle de la rotation. Un angle positif indique une rotation appliquée dans le sens horaire, un angle négatif applique une rotation dans le sens anti-horaire.
<style>
.fond {
width: 200px;
height: 200px;
margin-left: 20px;
border: 1px dotted black;
perspective: 800px;
}
.carre {
width: 200px;
height: 200px;
background-color: coral;
}
.carre#rotat {
transform: rotatex(60deg);
}
</style>
<div class="fond">
<div class="carre"></div>
</div>
<br><br>
<div class="fond">
<div class="carre" id="rotat"></div>
</div>