Maison >interface Web >tutoriel CSS >Comment faire pivoter une image en HTML ?
Comment faire pivoter une image en HTML ?
- WBOYavant
- 2023-09-01 09:37:061799parcourir
Les images sont une partie importante des pages Web, et parfois elles doivent être pivotées pour les rendre plus belles ou s'adapter à la page Web. La rotation des images en HTML est un processus relativement simple et peut être réalisée à l'aide de CSS.
Le processus de changement de l'orientation d'une image sous un angle spécifique est appelé rotation de l'image. La propriété CSS transform est un moyen courant et simple de faire pivoter une image. Cette propriété est utilisée pour déplacer, faire pivoter, mettre à l’échelle et effectuer diverses transformations d’éléments.
Grammaire
Voici la syntaxe pour faire pivoter une image en HTML -
<style> transform: rotate(angle); </style>
Ici "angle" est la quantité de rotation appliquée à l'élément, spécifiée en degrés.
Comment faire pivoter une image en HTML ?
Les images sont une partie importante de la conception Web car elles ajoutent à l’attrait visuel du site Web et fournissent des informations aux utilisateurs. Il existe de nombreuses façons de faire pivoter des images en HTML, notamment la propriété de transformation CSS, les effets de survol et les animations.
Ici, nous discuterons de ces méthodes une par une -
Utiliser les propriétés de transformation CSS
L'attribut transform est la méthode la plus couramment utilisée en CSS pour faire pivoter une image ou un élément. La fonction rotate() est utilisée pour faire pivoter les éléments. La fonction rotate() prend une valeur en degré comme paramètre pour spécifier l'angle de rotation. Par exemple, pour faire pivoter une image de 90 degrés, nous pouvons utiliser le code CSS suivant −
.my-img {
transform: rotate(90deg);
}
Le code ci-dessus fera pivoter l'image de 90 degrés en utilisant la propriété transform.
Exemple 1
Voici un exemple de code complet pour faire pivoter une image de 90 degrés à l'aide de la propriété CSS transform.
<!DOCTYPE html>
<html>
<head>
<style>
body{ text-align:center; }
.my-img {
transform: rotate(90deg);
margin-top: 10px;
padding: 5px;
border: 5px solid #555;
}
img {
margin-top: 5px;
padding: 5px;
border: 5px solid #555;
}
</style>
</head>
<body>
<h3>Normal Image</h3>
<img src="https://www.tutorialspoint.com/images/html.gif" alt="Example Image">
<h3>Rotated image by 90 degrees using css transform property</h3>
<img src="https://www.tutorialspoint.com/images/html.gif" class="my-img" alt="Example Image">
</body>
</html>
Utilisez les effets de survol CSS
Pour créer des pages Web dynamiques et interactives, les effets de survol CSS sont un moyen populaire de faire pivoter les images. En CSS, nous pouvons facilement ajouter un effet de survol qui fait pivoter l'image lorsque l'utilisateur la survole. Pour ce faire, nous utilisons la pseudo-classe :hover en CSS. Voici un exemple −
<style>
.img:hover {
transform: rotate(60deg);
}
</style>
Dans l'exemple ci-dessus, nous utilisons la pseudo-classe :hover pour appliquer un effet de rotation lorsque l'utilisateur survole l'image. Utilisez l'attribut transform pour faire pivoter l'image de 60 degrés.
Exemple 2
Voici un exemple de code complet utilisant la pseudo-classe :hover pour faire pivoter une image de 60 degrés.
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
img{
border: 5px solid #555;
transition: transform 0.5s ease;
}
.my-img:hover {
transform: rotate(60deg);
}
</style>
</head>
<body>
<h3>Hover me to rotate by 60 degrees</h3>
<img src="https://www.tutorialspoint.com/images/html.gif" class="my-img" alt="Example Image">
</body>
</html>
Utilisez des animations CSS
Utiliser l'animation CSS pour faire pivoter les images est une autre façon de créer des pages Web dynamiques et interactives. En CSS, nous pouvons facilement ajouter une animation à une image afin qu'elle tourne en continu ou pendant une durée spécifiée. Pour cela, nous pouvons utiliser le code suivant.
<style>
.my-img {
border: 5px solid #555;
margin-top: 20px;
animation: rotation 4s infinite linear;
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
Dans le code ci-dessus, nous utilisons la propriété animation pour créer une animation de rotation qui se répète continuellement. Les règles @keyframes sont utilisées pour définir les animations de rotation. Le mot-clé from définit le point de départ de l’animation et le mot-clé to définit le point final.
Exemple 3
Il s'agit d'un exemple de code complet de rotation d'une image dans une boucle à l'aide de méthodes d'animation CSS.
<!DOCTYPE html>
<html>
<head>
<style>
body {
text-align: center;
}
.my-img {
border:5px solid #555;
margin-top:20px;
animation: rotation 4s infinite linear;
}
@keyframes rotation {
from {
transform: rotate(0deg);
}
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<h3>To rotate an image in a circular way using CSS</h3>
<img src="/images/html.gif" class="my-img"></div>
</body>
</html>
Conclusion
La rotation d'images à l'aide de HTML est un excellent moyen d'ajouter un intérêt visuel à vos pages Web. Avec l'exemple ci-dessus, nous pouvons voir à quel point il est facile de faire pivoter une image en utilisant différentes méthodes telles que les degrés, les effets de survol et l'animation.
Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!