The effect of CSS3 under hover

CSS3 in hover under the several effects code sharing, CSS3 in the mouse after the several effects collection

Effect One: 360° rotation 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 two: 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);
}

Effect three: Rotate enlarge modify rotate (rotation degree) scale (enlarge 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:rotate (360DEG) scale (1.2);
-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 four: Move up or down 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 hover related articles please follow topic.alibabacloud.com!

