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 */