CSS3 implementation of avatar rotation effect example sharing

This article mainly introduces CSS3 to achieve the avatar rotation effect. The editor thinks it is quite good. Now I will share it with you and give it as a reference. Let’s follow the editor to take a look, I hope it can help everyone.

The effect when the mouse is not placed:

The rotation effect after the mouse is placed:

transition : all 2.0s; means that all attribute transformations are completed within 2 seconds;

transform: rotate(360deg); means that 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  src="/static/imghwm/default1.png" data-src="img/03.jpg" class="lazy" alt="CSS3 implementation of avatar rotation effect example sharing" >
    

Related recommendations;

Detailed examples of HTML5 and CSS3 to achieve 3D conversion effects

Detailed explanation of CSS and HTML custom checkbox Effect

About the implementation method of CSS3 multiple elements displaying the effect in sequence

The above is the detailed content of CSS3 implementation of avatar rotation effect example sharing. For more information, please follow other related articles on the PHP Chinese website!