Faire pivoter l'image en HTML
Cet article présentera une méthode pour faire pivoter une image en HTML.
Utilisez la propriété CSS transform pour faire pivoter une image en HTML
La propriété CSS transform implique de modifier un élément particulier de notre code. Nous avons besoin d’une ressource externe, l’image que nous transformons dans ce cas, pour la transformer. Cette propriété applique une transformation 2D ou 3D à un élément. De plus, cette propriété donne également l’autorisation de faire pivoter, mettre à l’échelle, déplacer, incliner, etc., aux détails. Il modifie également l’espace de coordonnées du modèle de formatage visuel CSS. Les éléments dont la mise en page est régie par le modèle de boîte CSS ne peuvent qu’être transformés. Nous pouvons définir la propriété transform sur une fonction rotate() mentionnant l’unité dans la fonction pour faire pivoter une image en HTML. La valeur de rotation de l’image doit être indiquée entre parenthèses de la fonction. L’unité deg est utilisée pour spécifier la valeur de rotation. Nous pouvons utiliser le CSS en ligne à cette fin. Le CSS sera utilisé dans la balise <img>.
Par exemple, insérez une image normale avec la balise <img> en HTML. Définissez l’attribut src sur https://loremflickr.com/320/320. Ensuite, pour une rotation de 90 degrés, insérez l’image et ajoutez-y des styles. Dans l’attribut style, définissez la propriété transform sur rotate(90deg). Ensuite, ajoutez une balise <br>. De même, faites pivoter les images sur 180deg et 360deg.
L’exemple ci-dessous illustre une méthode pour faire pivoter une image dans une source d’image en HTML. Nous avons stylisé la balise <img>, ce qui signifie que l’image insérée peut être tournée avec la propriété transform:rotate(). Nous avons inséré l’image originale et fait pivoter l’image à 90, 180 et 360 degrés. Nous pouvons écrire les valeurs de degrés souhaitées dans la fonction rotate(). La deuxième image de l’exemple pivote jusqu’à la moitié de l’axe. La troisième image est à l’envers car elle est tournée à 180 degrés. Lorsque l’image effectue une rotation de 360 degrés, elle ressemble à l’image d’origine. Ainsi, nous pouvons utiliser la propriété transform() et la valeur rotate() pour faire pivoter l’image en utilisant HTML et CSS.
Exemple de code :
<html>
<body>
Original Image
<img src="https://loremflickr.com/320/320" /> <br>
90 degree Rotation
<img src="https://loremflickr.com/320/320" style="transform:rotate(90deg);"> <br>
180 degree Rotation
<img src="https://loremflickr.com/320/320" style="transform:rotate(180deg);"> <br>
360 degree Rotation
<img src="https://loremflickr.com/320/320" style="transform:rotate(360deg);"> <br>
</body>
</html>
Sushant is a software engineering student and a tech enthusiast. He finds joy in writing blogs on programming and imparting his knowledge to the community.
LinkedIn