CSS3 transform 转换函数matrix之2D变换

CSS3 transform 转换函数matrix之2D变换

transform 属性向元素应用 2D 或 3D 转换。该属性允许我们对元素进行旋转、缩放、移动或倾斜。

1.transform-origin

该属性用来设置元素产生变换时的坐标原点（相对于左上角而言），默认坐标原点是元素的中心位置。
transform-origin:50% 50%; 就是默认的原点位置，在元素中心;
transform-origin:0 50%; 在元素最左边的中点位置，如图：

transform-origin:50% 100%; 在元素最左边的中点位置，如图：

2.rotate（旋转），正值按顺时针方向旋转，负值逆时针

如果没有设置transform-origin,那么元素绕默认原点旋转，即绕着元素中心位置旋转。
transform:rotate(90deg);效果如图

改变原点位置之后的旋转，下面示例是元素绕置的原点旋转45度：

transform-origin:100% 50%; 
transform:rotate(45deg);

3.translate（移动）

移动元素的位置，参数非别是left和top，移动和原点的位置无关

transform:translate(150px,100px);效果如图：

4.scale（缩放）

缩放和原点位置关系很大，其原理就是把每个点的横纵坐标乘以缩放的比例得到，所以原点的位置决定了缩放的不同结果。第一个参数是x的放大倍数。第二个是y的放大倍数。
transform:scale(3,2);先看看使用默认原点的效果

改变原点后放大的效果

transform-origin:100% 50%; 
transform:scale(3,2);

5.skew（斜拉）

参考：https://www.cnblogs.com/bianchengderen/p/5035071.html
transform:skew(15deg,0);效果如图

transform:skew(0,15deg);效果如图

6.matrix

以上所有变换都可以写成matrix函数形式，matrix(a,b,c,d,e,f)有六个参数，这六个参数对应到矩阵如下：

（1）移动

translate(x,y)也可以写成matrix(1,0,0,1,x,y)，对应矩阵为

（2）缩放

scale(x,y)也可以写成matrix(x,0,0,y,0,0)

（3）旋转

rotate(x)也可以写成matrix(cos(x),sin(x),-sin(x),cos(x),0,0)

（4）斜拉

skew(x,y)也可以写成matrix(1,tan(y),tan(x) ,1,0,0)

以上矩阵都为变换矩阵，图形的多次变换，可以由一个净变换矩阵表示，一个净变换矩阵，保存了多刺变换的结果，净变换矩阵可由多个变换矩阵相乘得到。

7.补充

不同浏览器transform属性前面可能需要添加不同的前缀。

-ms-transform:rotate(360deg); /* Internet Explorer */
-moz-transform:rotate(360deg); /* Firefox */
-webkit-transform:rotate(360deg); /* Safari 和 Chrome */
-o-transform:rotate(360deg); /* Opera */