Home > Article > Web Front-end > CSS makes the icon rotate when the mouse moves up

CSS makes the icon rotate when the mouse moves up

php中世界最好的语言Original: 2018-03-21 17:18:342049browse

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.

<!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>

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!

CSS makes the icon rotate when the mouse moves up

Related articles