Faire pivoter une image dans la source d'image en html

Les images sont une partie essentielle des sites Web qui transmettent certaines informations et rendent les pages Web plus attrayantes. De plus, les utilisateurs peuvent ajouter plusieurs types d'images, y compris les images de produits, les curseurs d'images et les illustrateurs. De plus, vous pouvez appliquer divers effets sur eux, comme le retournement ou la rotation. Ces fonctionnalités sont spécifiquement appliquées aux exemples d'images présentes dans les applications Web de retouche photo.

Ce message expliquera:

• Méthode 1: Comment faire pivoter une image dans la source d'image en HTML?
• Méthode 2: Comment faire pivoter une image dans HTML en utilisant les propriétés CSS?

Méthode 1: Comment faire pivoter une image dans la source d'image en HTML?

Pour faire pivoter une image dans la source d'image en HTML, utilisez le CSS en ligne directement dans la source d'image à l'aide d'instructions fournies.

Étape 1: Créez un conteneur «div»
Tout d'abord, créez un «div«Contaiteur avec l'aide du«"Tag et attribuez-le un"classe»Attribut avec un nom spécifique.

Étape 2: Ajouter l'image
Ensuite, ajoutez une image en utilisant le «"Tag avec le"SRC" attribut. Ensuite, affectez le nom de l'image ou l'URL de l'image comme «SRC" valeur:

La sortie résultante montre que l'image a été ajoutée avec succès:

Étape 3: Faites pivoter l'image
Ensuite, pour faire pivoter l'image dans une source d'image, appliquez le CSS en ligne à l'aide du «style"Attribut avec la propriété CSS"Transformer: Rotation (30deg)". Le "transformer”Est ​​utilisé pour appliquer la transformation à l'élément défini. Il existe quatre valeurs possibles pour la transformation: «tourner","escalader","déplacer", et "fausser". Plus précisément, le «tourner()»La fonction est utilisée pour faire pivoter l'image autour d'un plan 2D:

Sortir

Étape 3: Appliquer le style sur la source d'image à l'aide de CSS
Les utilisateurs peuvent également appliquer les autres propriétés CSS sur la source d'image en fonction de leurs besoins. À cette fin, accédez d'abord au «.source-IMG«Classe et appliquez les propriétés CSS comme suit:

.source-iMg
Largeur: 100px;
hauteur: 250px;
marge: 100px;

Ici:

• «La largeur» est utilisée pour régler la largeur de l'élément.
• La propriété «hauteur» alloue une hauteur spécifique à un élément.
• La «marge» est utilisée pour régler l'espace vide autour de l'élément.

Sortir

Méthode 2: Comment faire pivoter une image dans HTML en utilisant les propriétés CSS?

Les utilisateurs peuvent également faire pivoter l'image à l'aide de CSS intégrés. Plusieurs propriétés peuvent être utilisées à cette fin, comme le «tourner«Propriété et le«transformer" propriété.

Suivez les exemples fournis pour faire pivoter l'image à l'aide de CSS:

• Exemple 1: Image tournante à l'aide de la propriété «Rotation»
• Exemple 2: Image tournante à l'aide de la propriété «Transformer»

Exemple 1: Image tournante à l'aide de la propriété «Rotation»
Le "tourner»La propriété CSS est utilisée pour faire tourner l'élément dans le sens des aiguilles d'une montre autour du plan 2D. Pour appliquer cette propriété pour faire tourner l'image, consultez les étapes données.

Étape 1: Créez un conteneur «div»
Créez un conteneur «div» en utilisant le «”Tag et insérer un attribut de classe avec un nom spécifique.

Étape 2: Ajouter une image
Ensuite, ajoutez une image à l'aide du ""Tag avec le"SRC" et "alt" les attributs. L'attribut «Alt» est utilisé pour définir du texte alternatif pour l'image:

Sortir

Étape 3: Appliquer la propriété «Rotation»
Maintenant, accédez à la classe à l'aide du sélecteur de classe et du nom ".tourner". Ensuite, appliquez le «marge" et le "tourner”Propriété dessus. Par exemple, la valeur du «tourner"Est défini comme"45deg»:

.tourner
marge: 100px 50px;
tourner: 45deg;

La sortie indique que l'image tourne avec succès en utilisant le «tourner" attribut:

Exemple 2: Image tournante à l'aide de la propriété «Transformer»
Accéder à la classe en utilisant ".tourner". Ensuite, appliquez le «marge" et "transformer" propriétés:

.tourner
marge: 100px 50px;
transformée: rotation (320deg);

Ici le "transformer»La propriété est utilisée pour transformer l'image. Dans notre scénario, la valeur est définie comme «Rotation (320deg)". Où "tourner()»Est une fonction utilisée pour faire pivoter l'élément:

La sortie ci-dessus montre que l'image est tournée sur l'angle spécifié autour du plan 2D.

Conclusion

Pour faire pivoter l'image dans la source d'image en HTML, les utilisateurs peuvent utiliser le «style«Attribut et définissez la valeur comme«Transformer: Rotate ()". De plus, vous pouvez également utiliser le CSS intégré pour faire pivoter l'image dans la source d'image à l'aide de «tourner" propriétés. Cet article a indiqué les procédures liées à la rotation de l'image dans la source d'image en HTML.