How to use CSS to achieve the effect of mouse up icon rotation

This article mainly introduces the CSS implementation of the mouse up icon rotation effect, the need for friends can refer to the next

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:


The above is the whole content of this article, I hope that everyone's learning has helped, more relevant content please pay attention to topic.alibabacloud.com!