The effect of CSS3 under hover

Code sharing of several effects of CSS3 under hover, a collection of several effects of CSS3 when the mouse passes over it

Effect 1: 360° rotation to modify rotate (degree of rotation)

* {
transition:All 0.4s ease-in-out;
-webkit-transition:All 0.4s ease-in-out;
-moz-transition:All 0.4s ease-in-out;
-o-transition:All 0.4s ease-in-out;
}
*:hover {
transform:rotate(360deg);
-webkit-transform:rotate(360deg);
-moz-transform:rotate(360deg);
-o-transform:rotate(360deg);
-ms-transform:rotate(360deg);
}

Effect 2 ：Enlarge and modify scale (enlarged value)
* {
transition:All 0.4s ease-in-out;
-webkit-transition:All 0.4s ease-in-out;
-moz -transition:All 0.4s ease-in-out;
-o-transition:All 0.4s ease-in-out;
}
*:hover {
transform:scale(1.2);
-webkit-transform:scale(1.2);
-moz-transform:scale(1.2);
-o-transform:scale(1.2);
-ms-transform:scale(1.2 ; -out;
-webkit-transition:All 0.4s ease-in-out;

-moz-transition:All 0.4s ease-in-out;

-o-transition:All 0.4s ease- in-out;
}

*:hover {

                                                                      through ‐ ‐ ‐ ‐ ‐‐‐‐‐webkit-transform:rotate(360deg) scale(1.2); moz-transform:rotate(360deg) scale(1.2);
-o-transform:rotate(360deg) scale(1.2);
-ms-transform:rotate(360deg) scale(1.2);
}


Effect 4: Move up, down, left and right to modify translate(x-axis, y-axis)

* {
transition:All 0.4s ease-in-out;
-webkit-transition:All 0.4s ease-in-out;
-moz-transition:All 0.4s ease-in-out;
-o-transition:All 0.4s ease-in-out;

}

*:hover {
transform:translate(0,-10px);

-webkit-transform:translate(0,-10px);

-moz-transform:translate(0, -10px);
-o-transform:translate(0,-10px);
-ms-transform:translate(0,-10px);
}

More CSS3 in For articles related to the effect under hover, please pay attention to the PHP Chinese website!