Rotation

Nous pouvons utiliser la fonction rotate() pour faire pivoter les éléments. Les valeurs positives font pivoter l'élément dans le sens des aiguilles d'une montre, tandis que les valeurs négatives le font pivoter dans le sens inverse des aiguilles d'une montre. L'angle de rotation est généralement spécifié en degrés (deg), avec la valeur par défaut étant 0deg indiquant aucune rotation. D'autres unités acceptables pour les angles de rotation sont les tours (turn) et les radians (rad).

Axes des Éléments

Pour comprendre comment fonctionne la rotation, nous devons comprendre le concept des axes des éléments. Il y a trois axes :

• L'axe x est horizontal, allant de gauche à droite ;
• L'axe y est vertical, allant de haut en bas ;
• L'axe z est perpendiculaire à l'écran, pointant vers le spectateur.

Direction de la Rotation

Par défaut, la propriété rotate() fait tourner l'élément autour de l'axe z. Cependant, nous pouvons également appliquer une rotation autour de l'axe x et de l'axe y en utilisant les valeurs suivantes :

Exemple 1

Considérez le code d'exemple suivant, où nous appliquons différents angles de rotation pour démontrer la rotation autour de l'axe z :

Exemple 2

Dans cet exemple, nous explorons la rotation autour de l'axe z, de l'axe x et de l'axe y :