CSS3 realize the Avatar rotation effect instance sharing

This article mainly introduced the CSS3 realizes the Avatar rotation effect, the small compilation thought quite good, now shares to everybody, also gives everybody to make a reference. Follow the small series together to see it, hope to help everyone.

The mouse is not placed on the effect:

Rotate the effect after the mouse is placed:

Transition:all 2.0s; indicates that all attribute transformations are completed within 2 seconds;

Transform:rotate (360deg); indicates that the picture is rotated 360 degrees.

<! DOCTYPE html> 
Related recommendations;
 
Example HTML5, CSS3 realize 3D conversion effect
 
Detailed CSS and HTML custom checkbox effects
 
An implementation method of CSS3 multiple elements to display the effect sequentially