2D变换方法translate()、scale()、rotate()、skew()与matrix()的关系举例介绍。
一、介绍
2D变换方法：
-
- translate()：根据左(X轴)和顶部(Y轴)位置给定的参数，从当前元素位置移动。
- rotate()：在一个给定度数顺时针旋转元素。负值是允许的，这样是元素逆时针旋转。（绕着中心点旋转）
- scale()：元素按比例缩放，比例取决于宽度（X轴）和高度（Y轴）的参数。（缩放功能与中心点的位置有关）
- skew()：X轴和Y轴倾斜一定角度。
matrix()：2D变换方法合并成一个。有六个参数，包含旋转，缩放，移动（平移）和倾斜功能。
CSS3 transform 的 matrix() 方法如下：
transform: matrix(a,b,c,d,e,f);
二、关系与举例
1、matrix()与translate()偏移功能
matrix(a,b,c,d,e,f)实现偏移，只由e、f这两个参数决定。
参数e决定水平偏移量，f决定垂直偏移量。
eg:
transform: matrix(1, 0, 0, 1, 30, 30)就等同于transform: translate(30px, 30px)
即：向右偏移30px的同时向下偏移30px
2、matrix()与scale()缩放功能
matrix(a,b,c,d,e,f)实现偏移，只由a、d这两个参数决定。
参数a决定水平缩放量，d决定垂直缩放量。即：X轴(宽度)缩放a倍，Y轴(高度)缩放d倍。
eg:
transform: matrix(2, 0, 0, 3, 0, 0)就等同于transform: scale(2, 3)
即：元素宽度变为原来的2倍，高度变为原来的3倍
3、matrix()与rotate()旋转功能
matrix(a,b,c,d,e,f)实现旋转（假设角度为θ），对应方法如下：
matrix(cosθ,sinθ,-sinθ,cosθ,0,0)
eg:
transform: matrix(0.866025,0.500000,-0.500000,0.866025,0,0)就等同于transform:rotate(30deg)
即：以中心点为旋转点，顺时针旋转30度
4、matrix()与skew()倾斜功能
matrix(a,b,c,d,e,f)实现倾斜，与b、c两个参数有关。
b决定Y轴倾斜程度，c决定X轴倾斜程度，对应方法如下：
matrix(1,tan(θy),tan(θx),1,0,0)
eg:
matrix(1, 2.237161, 2.237161,1,0,0)就等同于transform:skew(20deg,20deg)
即：元素在X轴上倾斜20度和Y轴上倾斜20度。
