Implémentation CSS3 du partage d'exemples d'effet de rotation d'avatar

Cet article présente principalement l'effet de rotation des avatars en utilisant CSS3. L'éditeur pense que c'est plutôt bon, je vais donc le partager avec vous maintenant et le donner comme référence. Suivons l'éditeur pour y jeter un œil, j'espère que cela pourra aider tout le monde.

L'effet lorsque la souris n'est pas placée :

L'effet de rotation lorsque la souris est placée :

transition : tous les 2.0 ; signifie que toutes les transformations d'attributs sont terminées en 2 secondes ;

transform : rotate(360deg); signifie que l'image est pivotée de 360 ​​degrés.

nbsp;html>

    
        <meta>
        <title></title>
        <style>
            img{
                border: #000 solid 2px;
                display: block;
                margin: 50px auto;
                border-radius: 50%;
                transition: all 2.0s;
            }
            img:hover{
                transform: rotate(360deg);
            }
        </style>
    
    
        <img  src="/static/imghw/default1.png" data-src="img/03.jpg" class="lazy" alt="Implémentation CSS3 du partage d'exemples d'effet de rotation d'avatar" >
    

Recommandations associées ;

Exemples détaillés de HTML5 et CSS3 pour obtenir des effets de conversion 3D

Explication détaillée de Personnalisation CSS et HTML Définir l'effet de case à cocher

À propos de la méthode d'implémentation de plusieurs éléments CSS3 affichant l'effet en séquence

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!