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:

Next Just use css to achieve the icon rotation effect when the mouse moves up.

There is a box here, and a

picture is placed in the box, in order to see it more clearly , put a larger picture here. The effect to be achieved now is that when the mouse moves over the .box box, the icon img will rotate 180 degrees. In

style, the key is the setting of img and .box:hover img. First, we need to set the transition attribute for img. The attribute here specifies the animation method and duration. Then set the .box to rotate the img 180 degrees when the mouse moves up: hover:

transform: rotate(180deg);

as shown below - The settings of webkit- are mainly set up to be compatible with browsers from various manufacturers.

The effect obtained is shown in the figure below:

I believe that after reading the case in this article, you have mastered the method. For more exciting information, please Pay attention to other related articles on php Chinese website!

Recommended reading:

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!