Faire Pivoter L’Image Avec Un Clic Sur Javascript

| | | | | | | | | | | | | | | | | |

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.

rotate () Exemple CSS

Continuons et créons notre page HTML sur laquelle placer une boaîte rotative. Ajoutez une boaîte en tant que div et affectez-lui une classe (nous allons appelez-le "rotation") .

Ajoutons maintenant un peu de style:

Rafraaîchir. Super, nous avons une boaîte colorée. Avec cette boaîte colorée, nous avons tout ce dont nous avons besoin pour commencer à utiliser la fonction rotate () .

 Screen Shot 2020-08-12 at 8 09 12 PM

Pour faire pivoter notre boaîte, nous devons d’abord discuter de la propriété transform.

Le comme son nom l’indique, transforme les éléments. L’une des fonctions que nous pouvons lui appliquer est rotate (). La propriété transform peut assumer de nombreuses autres fonctions, et il y a beaucoup de choses que nous pouvons faire avec la transformation. Rotate n’est que l’un d’entre eux.

La fonction de rotation déplace un élément. Il faut un argument: le nombre de degrés que nous voulons incliner l’élément. Allons de l’avant et appliquons une rotation positive de 35 degrés:

Nous avons fait pivoter notre boaîte ! Touchez-vous dans le dos.

La rotation permet des idées d’interface utilisateur sophistiquées ou des images en rotation. Par exemple, vous pouvez faire pivoter une image de 180 degrés. Si vous avez besoin de faire pivoter cette image ailleurs, enregistrez-la et utilisez-la en conséquence.

Une autre chose que vous pouvez faire pivoter est le texte. Disons que vous créez une mise en page qui imite un magazine, vous pouvez réellement faire pivoter le texte pour mettre l’accent sur les éléments de texte.

Et ce n’est pas tout ce que vous pouvez faire avec rotate (). La fonction de rotation nous permet de créer des animations vraiment intéressantes !

Allons de l’avant et utilisons le CSS: hover selector sur notre div pour appliquer un bel effet de rotation:

Isn " N’est-ce pas cool?

GIF-20-31-51 < / figure>

Notre cadre pivote lorsque nous le survolons. Nous utilisons la propriété CSS background-color pour changer la couleur de notre cadre lorsque nous le survolons.

Conclusion

La fonction CSS rotate () fait apparaaître un élément Web asymétrique. La fonction accepte un argument: le nombre de degrés de rotation de l’élément. Vous pouvez spécifier une valeur de degré positive ou négative.

Les éléments rotatifs vous permettent de rendre vos pages Web plus esthétiques. Par exemple, vous pouvez appliquer une rotation à une case lorsque l’utilisateur la survole avec le curseur. Ou vous pouvez décider de faire pivoter un lien lorsqu’un utilisateur le survole avec la souris. La manière dont vous utilisez cette compétence dépend de vous !

√ätes-vous intéressé à en savoir plus sur CSS ? Consultez notre Guide complet d’apprentissage CSS pour obtenir des conseils d’experts et des conseils sur les meilleures ressources d’apprentissage.