CSS3动画的属性transform,animate.css

rotate
设置元素顺时针旋转的角度,用法是:transform: rotate(x);
参数x必须是以deg结尾的角度数或0,可为负数表示反向。

scale
设置元素放大或缩小的倍数,用法包括:
transform: scale(a); 元素x和y方向均缩放a倍
transform: scale(a, b); 元素x方向缩放a倍,y方向缩放b倍
transform: scaleX(a); 元素x方向缩放a倍,y方向不变
transform: scaleY(b); 元素y方向缩放b倍,x方向不变

translate 
设置元素的位移,用法为:
transform: translate(a, b);元素x方向位移a,y方向位移b
transform: translateX(a);  元素x方向位移a,y方向不变
transform: translateY(b);  元素y方向位移b,x方向不变

skew
设置元素倾斜的角度,用法包括:
transform: skew(a, b); 元素x方向逆时针倾斜角度a,y方向顺时针倾斜角度b
transform: skewX(a); 元素x方向逆时针倾斜角度a,y方向不变
transform: skewY(b); 元素y方向顺时针倾斜角度b,想方向不变

以上的参数均必须是以deg结尾的角度数或0,可为负数表示反向。

div{width: 100px; height: 100px; transition: all 1s; background: red;}

div:hover{transform: rotate(360deg) scale(2,2) skew(10deg,5deg);} 中间用空格隔开 旋转 缩放 扭曲 等同时执行多个效果!

官网:https://daneden.github.io/animate.css/

css下载:https://raw.githubusercontent.com/daneden/animate.css/master/animate.css

猜你喜欢

转载自blog.csdn.net/weixin_40292626/article/details/80267362