2021-05-09

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轴缩放，缩放多少倍就乘以多少