How to use CSS to achieve the effect of icon rotation when the mouse moves up-CSS Tutorial-php.cn

Home

Web Front-end

CSS Tutorial

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

Jun 20, 2018 pm 04:00 PM

This article mainly introduces CSS to realize the mouse-up icon rotation effect. Friends who need it can refer to it

The mouse-up icon rotation effect is often used in corporate projects, especially the top navigation Column, for example:

#The next step is to use css to achieve the icon rotation effect when the mouse moves up.

&lt;!DOCTYPE html&gt;  
&lt;html&gt;  
&lt;head lang=&quot;en&quot;&gt;  
    &lt;meta charset=&quot;UTF-8&quot;&gt;  
    &lt;title&gt;&lt;/title&gt;  
    &lt;style&gt;  
        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;  
        }  
    &lt;/style&gt;  
&lt;/head&gt;  
&lt;body&gt;  
    &lt;p class=&quot;box&quot;&gt;  
        &lt;img src=&quot;img/down.png&quot; alt=&quot;&quot;/&gt;  
    &lt;/p&gt;  
&lt;/body&gt;  
&lt;/html&gt;

Copy after login

A box is placed here, and a picture is placed in the box. In order to see it more clearly, a larger picture is placed 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);

Copy after login

The settings below such as -webkit- are mainly for Set up to be compatible with browsers from various manufacturers.

The effect obtained is shown in the figure below:

The above is the entire content of this article, I hope it will be helpful to everyone's study , please pay attention to the PHP Chinese website for more related content!

Related recommendations:

Use css3 and jQuery to realize text shaking up and down following the mouse

##Use css3 and jQuery to realize text Follow the up and down shaking of the mouse

The above is the detailed content of How to use CSS to achieve the effect of icon rotation when the mouse moves up. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website

The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn