Use CSS3 to implement avatar rotation effect animation

This time I will bring you the use of CSS3 to realize the avatar rotation effect animation, and what are the precautions for using CSS3 to realize the avatar rotation effect animation. The following is a practical case, let's take a look.

Effect when the mouse is not placed:

Rotate after the mouse is placed Effect:

##transition: all 2.0s; means that all

attributes transformation is completed within 2 seconds;

transform: rotate(360deg); means the image is rotated 360 degrees.

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  alt="Use CSS3 to implement avatar rotation effect animation" >
    

I believe you have mastered the method after reading the case in this article. For more exciting information, please pay attention to other related articles on the php Chinese website!

Recommended reading:

Bootstrap implementation price list

css to make ripple animation

How does CSS handle the browser’s default style

The above is the detailed content of Use CSS3 to implement avatar rotation effect animation. For more information, please follow other related articles on the PHP Chinese website!