La fonction CSS rotate() déforme un élément d’un certain nombre de degrés. Vous pouvez faire pivoter un élément dans le sens des aiguilles d’une montre en utilisant un nombre positif de degrés. Ou vous pouvez faire pivoter un élément dans le sens inverse des aiguilles d’une montre en utilisant un nombre négatif.
Aujourd’hui, nous allons apprendre à faire pivoter des éléments avec CSS. Pourquoi faire pivoter un élément ? Les éléments rotatifs rendent votre page Web plus interactive. Utilisé correctement, un élément rotatif ajoutera à l’esthétique de votre site.
Lors de la lecture de cet article, veuillez vous référer à référentiel d’accompagnement , afin que vous puissiez voir les concepts en action. Savoir comment faire pivoter un élément sera un ajout précieux à votre boaîte à outils CSS.
CSS rotate()
La fonction CSS rotate() vous permet de faire pivoter un élément sur un axe 2D. La fonction rotate () prend un argument: l’angle auquel vous souhaitez faire pivoter votre élément Web. Vous pouvez faire pivoter un élément dans le sens des aiguilles d’une montre ou dans le sens inverse.
Regardons la syntaxe de la fonction rotate():
La valeur " angle " représente le nombre de degrés que l’élément doit tourner. Vous pouvez spécifier une rotation dans le sens horaire en utilisant un nombre positif de degrés (par exemple 45). Ou vous pouvez faire pivoter dans la direction opposée en utilisant une valeur de degré négative (par exemple -39).
La fonction rotate() peut être appliquée à n’importe quel élément HTML. Par exemple, vous pouvez faire pivoter un paragraphe de texte. Ou vous pouvez faire pivoter une image.
Une rotation HTML apparaaît dès que vous rendez la page, il n’y a donc pas de rotation visible. Pour voir la rotation en action, vous devez utiliser une transition CSS . Les transitions changent l’état d’un élément lorsqu’une action est effectuée, par exemple lorsqu’un curseur survole un élément.
< / figure>