HTML

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); } ...

Let’s take a sneak peek at the renderings first. (This is definitely not a picture. Well~ why are these words so weird~) Don’t ask me how much my iPhone is, because I don’t know, I haven’t used it, so you know. css style part #phone{ width:250px; height:500px; background-color:#2E2E2E; border:10px solid #3B3B3B; margin:100px auto; border-radius:30px;/*Set the rounded border of the div element*/ } #camera{ width:8px; height:8px; background-color:#1A1A1A; border-radius:50%; border:2px solid #505050; margin:10px auto;/*10px from top margin, left and right center*/ } ...