Exemple de code pour implémenter l'effet de rotation d'avatar à l'aide de CSS3-tutoriel CSS-php.cn

Exemple de code pour implémenter l'effet de rotation d'avatar à l'aide de CSS3

高洛峰

Libérer： 2017-03-15 09:07:01

original

1569 Les gens l'ont consulté

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 oeil

L'effet de la souris n'est pas placé :

Exemple de code pour implémenter leffet de rotation davatar à laide de CSS3

Effet de rotation après avoir placé la souris :

Exemple de code pour implémenter leffet de rotation davatar à laide de CSS3

transition : tous 2.0 signifie tous attributs La transformation est terminée en 2 secondes ;

trans

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

<!DOCTYPE html>
<html>
    <head>
        <meta charset="UTF-8">
        <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>
    </head>
    <body>
        <img  src="img/03.jpg" / alt="Exemple de code pour implémenter l'effet de rotation d'avatar à l'aide de CSS3" >
    </body>
</html>

Copier après la connexion

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!