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度。

matrix()方法與translate()、scale()、rotate()、skew()方法的關系