分享4种CSS3效果(360度旋转、旋转放大、放大、移动)

转自：http://www.j                     q-school.com/Show.aspx?id=281

本文仅供自己学习而转载，由于效果掩饰地址的转载出现问题，强烈建议去源网站查看示例！    上面为源网站网址，中间大段的空格去掉。

 

效果一：360°旋转 修改rotate(旋转度数)     效果演示地址

01	* {
02	    transition:All 0.4s ease-in-out;
03	    -webkit-transition:All 0.4s ease-in-out;
04	    -moz-transition:All 0.4s ease-in-out;
05	    -o-transition:All 0.4s ease-in-out;
06	}
07	*:hover {
08	    transform:rotate(360deg);
09	    -webkit-transform:rotate(360deg);
10	    -moz-transform:rotate(360deg);
11	    -o-transform:rotate(360deg);
12	    -ms-transform:rotate(360deg);
13	}

　　

效果二：放大 修改scale(放大的值)     效果演示地址

01	* {
02	    transition:All 0.4s ease-in-out;
03	    -webkit-transition:All 0.4s ease-in-out;
04	    -moz-transition:All 0.4s ease-in-out;
05	    -o-transition:All 0.4s ease-in-out;
06	}
07	*:hover {
08	    transform:scale(1.2);
09	    -webkit-transform:scale(1.2);
10	    -moz-transform:scale(1.2);
11	    -o-transform:scale(1.2);
12	    -ms-transform:scale(1.2);
13	}

　　

效果三：旋转放大 修改rotate(旋转度数) scale(放大值)     效果演示地址

01	* {
02	    transition:All 0.4s ease-in-out;
03	    -webkit-transition:All 0.4s ease-in-out;
04	    -moz-transition:All 0.4s ease-in-out;
05	    -o-transition:All 0.4s ease-in-out;
06	}
07	*:hover {
08	    transform:rotate(360deg) scale(1.2);
09	    -webkit-transform:rotate(360deg) scale(1.2);
10	    -moz-transform:rotate(360deg) scale(1.2);
11	    -o-transform:rotate(360deg) scale(1.2);
12	    -ms-transform:rotate(360deg) scale(1.2);
13	}

　　

效果四：上下左右移动 修改translate(x轴,y轴)     效果演示地址

01	* {
02	    transition:All 0.4s ease-in-out;
03	    -webkit-transition:All 0.4s ease-in-out;
04	    -moz-transition:All 0.4s ease-in-out;
05	    -o-transition:All 0.4s ease-in-out;
06	}
07	*:hover {
08	    transform:translate(0,-10px);
09	    -webkit-transform:translate(0,-10px);
10	    -moz-transform:translate(0,-10px);
11	    -o-transform:translate(0,-10px);
12	    -ms-transform:translate(0,-10px);
13	}

　　

Demo打包下载