Css3动画(2d转换)
~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~~
开发工具与关键技术:
作者:
撰写时间:
通过css3转换,我们能够对元素进行移动、缩放、转动、拉长或拉伸。
2D转换
transform: translate(x,y);移动 left(x坐标),top(y坐标);
transform: rotate(); 元素顺时针旋转给定的角度。允许负值,元素将逆时针旋转。
transform: scale(x,y); 根据给定的 宽度(x) 和高度(y)来设置元素的的大小
transform: skew(x,y);
x轴:根据给定的值向左翻转,允许负值,将向右翻转
y轴: 根据给定的值向下翻转,允许负值,将向上翻转
transform: matrix(a,b,c,d,e,f); 把所有 2D 转换方法组合在一起。
方法需要六个参数,包含数学函数,允许您:旋转、缩放、移动以及倾斜元素。
参数矩阵:
a c e
b d f
平移
在CSS3中我们矩阵的原始值是这样的
transforms:matrix(1,0,0,1,0,0);
transform: matrix(a,c,e,b,d,f)
平移只有跟e和f有关系, e对应x轴的平移,f对应y轴的平移,允许负值,往反向移动
缩放
就是x和y的倍数发生了变化,
transform: matrix(a,c,e,b,d,f)
结论:缩放只有跟a和b有关系,跟其他数值都无关,a对应x轴缩放,b对应y轴缩放,缩放多少倍就乘以多少