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

變換矩陣和凈變換矩陣

matrix(a,b,c,d,e,f)有六個(gè)參數(shù)，這六個(gè)參數(shù)對(duì)應(yīng)到矩陣如下：

???ab0cd0ef1???

在圖形學(xué)上，這種叫做齊次坐標(biāo)矩陣，用齊次坐標(biāo)矩陣和圖形的頂點(diǎn)相乘，就能得到變換后的新頂點(diǎn)的位置。比如，圖形有一個(gè)頂點(diǎn)（a，b），現(xiàn)使圖形整體延x軸平移100px，平移后該頂點(diǎn)的位置應(yīng)該是（a+100，b）。很明顯，下面的矩陣運(yùn)算就表示了這個(gè)過程：

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

因此，知道了這個(gè)齊次坐標(biāo)矩陣，就可以算出任何一點(diǎn)變換后的位置，所以，這個(gè)齊次坐標(biāo)矩陣就是變換矩陣。

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

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

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

???1000101001001???

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

2D變換

我們知道m(xù)atrix(a,b,c,d,e,f)有六個(gè)參數(shù)，這六個(gè)參數(shù)對(duì)應(yīng)到矩陣如下：

???ab0cd0ef1???

對(duì)于常用的2D變換，圖形學(xué)的相關(guān)書籍已經(jīng)指出了其變換矩陣，我們直接使用就好了：

• 平移

  ???100010xy1???

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

• 縮放

  ???x000y0001???

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

• 旋轉(zhuǎn)

  ???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的實(shí)現(xiàn)。

3D變換

matrix3d(0,1,2,3,4,5,6,7,8,9,10,11,12,13,14,15)有16個(gè)參數(shù)，這16個(gè)參數(shù)對(duì)應(yīng)到矩陣如下：

?????0123456789101112131415?????

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

在圖形學(xué)上，對(duì)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)

• 旋轉(zhuǎn)

  3維旋轉(zhuǎn)稍微復(fù)雜，因?yàn)樾D(zhuǎn)的軸有可能不是標(biāo)準(zhǔn)的x,y,z軸了，而可能是任何一個(gè)向量。一般可用歐拉角和四元數(shù)表示旋轉(zhuǎn)，而歐拉旋轉(zhuǎn)由于存在“萬向節(jié)死鎖”問題，所以最好還是用四元數(shù)來表示。

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

  ??????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(θ)
  使用上面的變換矩陣可以實(shí)現(xiàn)在坐標(biāo)原點(diǎn)繞任意軸的旋轉(zhuǎn)，所以，變換完要做一次逆變換，將圖形移回原來的位置。

這部分可以看一下 css3js 源代碼的Matrix4的實(shí)現(xiàn)。

總結(jié)

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

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。