矩陣可以用來表示圖形的變換。css3定義了matrix和matrix3d方法，用來表示2維和3維的變換。下文將分析這兩個接口的使用方法，并且用下文的思路，實現了一個簡單的用js控制css3變換的jquery插件css3js ，

變換矩陣和凈變換矩陣

matrix(a,b,c,d,e,f)有六個參數，這六個參數對應到矩陣如下：

???ab0cd0ef1???

在圖形學上，這種叫做齊次坐標矩陣，用齊次坐標矩陣和圖形的頂點相乘，就能得到變換后的新頂點的位置。比如，圖形有一個頂點（a，b），現使圖形整體延x軸平移100px，平移后該頂點的位置應該是（a+100，b）。很明顯，下面的矩陣運算就表示了這個過程：

???10001010001??? × ???ab1??? = ???a+100b1???

因此，知道了這個齊次坐標矩陣，就可以算出任何一點變換后的位置，所以，這個齊次坐標矩陣就是變換矩陣。

如果該點再次延y軸平移100px，平移后的新位置應該是（a+100,b+100）,則整個過程可表示成：

???10001010001??? × ???10001001001??? × ???ab1???= ???1000101001001??? × ???ab1??? = ???a+100b+1001???

由此可得，圖形的多次變換，可以由一個凈變換矩陣表示，像上面算式中的

???1000101001001???

就是一個凈變換矩陣，保存了兩次變換的結果。凈變換矩陣可由多個變換矩陣相乘得到。

2D變換

我們知道matrix(a,b,c,d,e,f)有六個參數，這六個參數對應到矩陣如下：

???ab0cd0ef1???

對于常用的2D變換，圖形學的相關書籍已經指出了其變換矩陣，我們直接使用就好了：

• 平移

  ???100010xy1???

  所以translate(x,y)也可以寫成`matrix(1,0,0,1,x,y)

• 縮放

  ???x000y0001???

  所以scale(x,y)也可以寫成`matrix(x,0,0,y,0,0)

• 旋轉

  ???cos(x)sin(x)0?sin(x)cos(x)0001???

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

• 變形
  ???1tan(x)0tan(y)10001???

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

這部分可以看一下 css3js 源代碼的Matrix3的實現。

3D變換

matrix3d(0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15)有16個參數，這16個參數對應到矩陣如下：

?????0123456789101112131415?????

可以看到，這16個參數是按列排列出矩陣的。3維變換矩陣相比2維變換矩陣增加了一個維度，但是原理是相似的，也是使用齊次坐標矩陣表示變換矩陣和凈變換矩陣。

在圖形學上，對3維變換的變換矩陣也早有定義：

• 平移

  ?????100001000010xyz1?????

  所以translate(x,y,z)也可以寫成`matrix(1,0,0,0,0,1,0,0,0,0,1,0,x,y,z,1)

• 縮放

  ?????x0000y0000z00001?????

  所以scale(x,y,z)也可以寫成`matrix(x,0,0,0,0,y,0,0,0,0,z,0,0,0,0,1)

• 旋轉

  3維旋轉稍微復雜，因為旋轉的軸有可能不是標準的x,y,z軸了，而可能是任何一個向量。一般可用歐拉角和四元數表示旋轉，而歐拉旋轉由于存在“萬向節死鎖”問題，所以最好還是用四元數來表示。

  四元數，即是一個復數：p = a i +b j +c k+d，關于四元數比較難解釋，可以看中文翻譯《理解四元數》。幸好，四元數變換也有變換矩陣：

  ??????x2?w+cos(θ)y?x?w+z?sin(θ)z?x?w?y?sin(θ)0x?y?w?z?sin(θ)y2?w+cos(θ)z?y?w+x?sin(θ)0x?z?w+y?sin(θ)y?z?w?x?sin(θ)z2?w+cos(θ)00001??????

  其中 w=1?cos(θ)
  使用上面的變換矩陣可以實現在坐標原點繞任意軸的旋轉，所以，變換完要做一次逆變換，將圖形移回原來的位置。

這部分可以看一下 css3js 源代碼的Matrix4的實現。

總結

以上是生活随笔為你收集整理的css3 transform matrix 深入理解的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。