Comment faire tourner une image au survol avec CSS ?
Nov 03, 2024 am 03:01 AMTournage d'images déclenché par le survol
Pour de nombreuses applications Web, il est souhaitable d'ajouter des effets animés interactifs pour améliorer l'engagement des utilisateurs. L'un de ces effets consiste à faire tourner ou à faire pivoter une image lorsqu'un utilisateur la survole. Cet article montre comment obtenir cette fonctionnalité en utilisant CSS sur une image circulaire.
Implémentation CSS pour la rotation d'image
Pour créer une image tournante au survol, vous pouvez utiliser les transitions CSS3 avec l'option 'rotate( )' propriété. L'extrait de code CSS suivant fournit les styles nécessaires :
<code class="css">img { transition: transform .7s ease-in-out; } img:hover { transform: rotate(360deg); }</code>
Explication :
- La propriété 'transition' définit la durée et l'effet de transition pour le ' la propriété transform' change. Dans ce cas, la transition prendra 0,7 seconde avec un effet « facilité d'entrée et de sortie ».
- Lorsque l'utilisateur survole l'image, le style « survol » est appliqué.
- Le La propriété 'transform' avec 'rotate(360deg)' fait pivoter l'image de 360 degrés, créant l'effet de rotation.
Application du style au HTML
Dans l'extrait de code HTML ci-dessous, un l'image est intégrée à l'aide de la balise 'img' :
<code class="html"><img src="https://i.sstatic.net/BLkKe.jpg" width="100" height="100" /></code>
En liant le code CSS à cette page HTML, l'image tournera lorsque l'utilisateur la survolera. Cela démontre une technique simple et efficace pour ajouter des éléments interactifs aux applications Web.
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!

Article chaud

Outils chauds Tags

Article chaud

Tags d'article chaud

Bloc-notes++7.3.1
Éditeur de code facile à utiliser et gratuit

SublimeText3 version chinoise
Version chinoise, très simple à utiliser

Envoyer Studio 13.0.1
Puissant environnement de développement intégré PHP

Dreamweaver CS6
Outils de développement Web visuel

SublimeText3 version Mac
Logiciel d'édition de code au niveau de Dieu (SublimeText3)

Sujets chauds

Ajout d'ombres de boîte aux blocs et éléments WordPress

Créez un formulaire de contact JavaScript avec le cadre Smart Forms

Créer un éditeur de texte en ligne avec l'attribut satisfaistable

Faire votre première transition Svelte personnalisée

Comparaison des 5 meilleurs constructeurs de formulaires PHP (et 3 scripts libres)

Téléchargement de fichiers avec Multer dans Node.js et Express

Meilleures animations et effets CSS sur Codecanyon 2025 (payé gratuitement)
