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

程序员鹏志技术 2022年11月7日

0 收藏 429 点赞 498 浏览 1597 个字

转自：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打包下载