css动画
1.1移动transform
不能在同一个元素上添加多个transform,后面的transform会覆盖掉前面的
transform只会对于 块级元素 生效,非块级元素,需要进行元素转换
多个transform属性值的使用,可以写在一个transform里面
transform: rotate(10deg) translateX(100px) skew(10deg) scale(0.5);
注意:顺序不同,会导致最后的位置不同
名称 | 解析 |
---|---|
平移 | 单位px,或% |
translate(a) | a——水平平移的位置 |
a>0 水平向右平移 | |
<0 向左平移 | |
=0 保存原生位置不变 | |
translate(a,b) | 正正 右下 |
正负 右上 | |
y轴 向下为正,向上为负! | |
控制某一轴的平移方向 | translateX 水平方向 |
translateY 垂直方向 | |
旋转 | 单位deg, 旋转,绕着原点/中心点 |
rotate(a) | a>0 顺时针 |
a<0 逆时针 | |
绕着x轴的旋转 | 沿水平方向旋转,顺时针为正,逆时针为负 |
绕着Y轴的旋转 | 3D中,y轴向下为正,沿垂直方向旋转,相对于自己来说,逆时针为正向右转,顺时针为负向左转 |
缩放 | |
scale(a)缩放 | a——倍率 |
一个值:控制水平方向+垂直方向的缩放比例 | 0<a<1 缩小 |
a>1 放大 | |
a=0 让元素消失/被隐藏了,但是不会删除元素 | |
a=1 不变 | |
a=-1 大小不变,镜像显示 | |
a<0 负数,倒向 | |
0<|a|<1 缩小 | |
|a|>1 放大 | |
只控制水平方向 |