This article mainly introduces the effect of avatar rotation using CSS3. The editor thinks it is quite good, so I will share it with you now and give it as a reference. Let’s follow the editor to take a look.
The effect of not placing the mouse:
The rotation effect after the mouse is placed:
transition: all 2.0s; indicates all attributes The transformation is completed within 2 seconds;
transform: rotate(360deg); means picture is rotated 360 degrees.
<!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="Example code for implementing avatar rotation effect using CSS3" > </body> </html>
The above is the detailed content of Example code for implementing avatar rotation effect using CSS3. For more information, please follow other related articles on the PHP Chinese website!