Home > Article > Web Front-end > CSS makes the icon rotate when the mouse moves up
This time I will bring you CSS to rotate the icon when the mouse moves up. What are the precautions to realize the rotation of the icon when the mouse moves up? The following is a practical case, let's take a look.
The mouse-up icon rotation effect is often used in corporate projects, especially the top navigation bar, such as:<!DOCTYPE html> <html> <head lang="en"> <meta charset="UTF-8"> <title></title> <style> p,img,body{ margin: 0; padding: 0; } .box{ height: 150px; width:300px; background: #1b7b80; margin: 0 auto; padding: 20px; } .box:hover img{ transform: rotate(180deg); -webkit-transform: rotate(180deg); -moz-transform: rotate(180deg); -o-transform: rotate(180deg); -ms-transform: rotate(180deg); } img{ margin: 0 auto; display: block; transition: all 0.2s ease-in-out; -webkit-transition: all 0.2s ease-in-out; -moz-transition: all 0.2s ease-in-out; -o-transition: all 0.2s ease-in-out; } </style> </head> <body> <p class="box"> <img src="img/down.png" alt=""/> </p> </body> </html>
transform: rotate(180deg);
Detailed explanation of the special techniques for using CSS margin
Optimizing the styles of radio buttons and check boxes
The above is the detailed content of CSS makes the icon rotate when the mouse moves up. For more information, please follow other related articles on the PHP Chinese website!