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

程序员静静技术 2022年11月7日

0 收藏 950 点赞 850 浏览 1218 个字

旋转：* {
    transition:All .4s ease-in-out;
    -webkit-transition:All .4s ease-in-out;
    -moz-transition:All .4s ease-in-out;
    -o-transition:All .4s ease-in-out;
}
*:hover {
    transform:rotate(360deg);
    -webkit-transform:rotate(360deg);
    -moz-transform:rotate(360deg);
    -o-transform:rotate(360deg);
    -ms-transform:rotate(360deg);
}

放大：* {
    transition:All .4s ease-in-out;
    -webkit-transition:All .4s ease-in-out;
    -moz-transition:All .4s ease-in-out;
    -o-transition:All .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);
}

放大旋转
* {
    transition:All .4s ease-in-out;
    -webkit-transition:All .4s ease-in-out;
    -moz-transition:All .4s ease-in-out;
    -o-transition:All .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);
}

上下左右移动：
* {
    transition:All .4s ease-in-out;
    -webkit-transition:All .4s ease-in-out;
    -moz-transition:All .4s ease-in-out;
    -o-transition:All .4s ease-in-out;
}
*:hover {
    transform:translate(,-10px);
    -webkit-transform:translate(,-10px);
    -moz-transform:translate(,-10px);
    -o-transform:translate(,-10px);
    -ms-transform:translate(,-10px);
}