CSS to make the mouse move up icon rotation

This time for everyone to bring CSS to make the mouse up icon rotation, to achieve the mouse move icon rotation of the note what, the following is the actual case, together to see.

The mouse up icon rotation effect is often used in enterprise projects, especially the top navigation bar, such as:

The next step is to use CSS to implement the mouse up icon rotation effect.

<!      DOCTYPE html> 


Here is a box, put a picture in the box, in order to be able to see more clearly, here put a larger picture. The effect now is that when you move the mouse over the. Box box, the icon IMG will do a 180-degree rotation.

The key to the style is the IMG and. Box:hover img Settings, first we need to set the Transition property to IMG, where the properties specify how and when the animation lasts. Then give the. box settings when the mouse moves up: hover the action of IMG is rotated 180 degrees:



Transform:rotate (180DEG);


The settings below, such as-webkit-, are set primarily to be compatible with the browser of each vendor.

The resulting effect is as follows:


Believe that you have read the case of this article you have mastered the method, more exciting please pay attention to the PHP Chinese network other related articles!

Recommended reading:

Specific tips for using CSS margin

Refine the style of a radio box, check box