You often see comment sections on some websites, where the commenter’s avatar will rotate 360° when the mouse passes over it.
Let’s take a look at the effect first
.tximg{ height:300px; border-radius:50%; border:2px solid green; /*Change rules*/ transition:all 2s; } .tximg:hover{ /* Change action defines 2d rotation, parameter fills in angle */ transform:rotate(360deg); } 
css part
img{ height:300px; border-radius:50%; border:2px solid green; /*Change rules*/ transition:all 2s; }
img:hover{ /* change action Define 2d rotation, fill in the angle as a parameter */ transform:rotate(360deg); }
HTML part (very simple, just a picture)
3D rotation effect (the front display style still seems to be conflicting-.-)
.div{ width:300px; height:300px; border:1px solid red; /*If you want to see the 3D effect, you need to add a perspective attribute to the parent element of the moving element*/ perspective:300px;/*The distance of the 3D element from the view is generally consistent with the height of the picture for the best effect*/ } .img{ width:300px; height:300px; border:1px solid red; /*Change rules*/ /*Set the origin position of the rotated element*/ transform-origin:bottom; transition:all 2s; } .img:hover{ /*Change action*/ transform:rotateX(60deg); }
CSS code
div{ width:300px; height:300px; border:1px solid red; /*If you want to see the 3D effect, you need to add a perspective attribute to the parent element of the moving element*/ perspective:300px;/*The distance of the 3D element from the view, generally consistent with the picture for the best effect*/ } img{ width:300px; height:300px; border:1px solid red; /*Change rules*/ /*Set the origin position of the rotated element*/ transform-origin:bottom; transition:all 2s; }
img:hover{ /*Change action*/ transform:rotateX(60deg);
}
The HTML code part is exactly the same as the avatar rotation part. Just put a picture and ignore it here.
Because I directly insert the rendering into the current page, it will conflict with the css style of the current page and destroy the entire page. I have fixed the style selector of the rendering.
Note: It may not take effect in IE mode