Comment faire pivoter une image HTML ?

Réponses rédigées par Antoine
Dernière mise à jour : 2018-02-01 14:07:55
Thèmes : site-web - html - css - jquery - script
Question

Comment puis-je faire pour faire pivoter une image sur une page Web, en HTML, JavaScript, ou avec une autre langage ?

Réponse

Faire pivoter une image sur une page Web est possible avec l'utilisation de code CSS, pour créer une classe de rotation, que vous pouvez ensuite utiliser avec la balise <img>, pour faire pivoter l'image sur la page.

Le code CSS doit inclure le code de transformation pour chaque navigateur Internet majeur, de sorte que l'image pivote dans tous les navigateurs.

.rotation90 {
   -webkit-transform: rotate(90deg);
   -moz-transform: rotate(90deg);
   -ms-transform: rotate(90deg);
   -o-transform: rotate(90deg);
   transform: rotate(90deg);
 }

Une fois que le code CSS a été appliqué à votre fichier .css ou à votre feuille de style, vous pouvez utiliser le nom de la classe CSS dans l'un de vos tags d'image comme indiqué dans le code ci-dessous.

<img src="image.jpg" width="200" height="200" class="rotation90">

Astuce: Pour faire pivoter une image d'une autre mesure de degrés, changez le 90 dans le code CSS et la balise <img> au degré que vous désirez.

Remarque : Vous pouvez également utiliser jQueryRotate pour faire pivoter une image avec jQuery.