在css3轉換以及htmal5畫布裡均有元素或圖形的轉換，除了基本的移動、縮放、轉動、拉伸還有乙個能包含上述所有轉換方法的matrix方法，在html5的canvas裡用的是transform，不管是css3還是html5，其轉換的本質是一樣的，不同的是css3裡預設座標原點在中間，html5預設座標在左上角，但都有對應方法可以移動座標軸。下面就總結如何運用matrix方法進行轉換。
雖然在css3裡是對元素進行操作，但本質上是對座標系的變換，元素上每個點都有對應的座標，所以通過對座標系的移動、拉伸就是對座標上的元素移動和拉伸。而構成座標系的是原點和x軸，y軸，所以通過對這三個量進行操作就能變換座標系。值得注意的是這裡的y軸朝下，和數學上的方向相反。
原點的座標是(0,0)，x軸上的點座標是(x,0)，y軸上點的座標是(0,y)，通過對這三個點進行變換則可以對座標軸進行變換，把這三個點的x相加即可得到乙個點的橫座標，把y相加即可得到縱座標。下面先看基本變換是如何實現的。
1、 移動
移動即時對原點的移動，所以原點座標由(0,0)
⇒ (x0
,y0 )，而x和y上的點沒變，所以移動後的點由[(x,0),(0,y),(0,0)]變換為[(x,0),(0,y),(x0
,y0 )]。再來看矩陣如何變換，對於(a,b,c,d,e,f)，在矩陣中表示為:⎡⎣
⎢ab0
cd0e
f1⎤⎦
⎥ ，乘以⎡⎣
⎢xy1
⎤⎦⎥ ，結果為⎡⎣
⎢ax+
cy+e
bx+d
y+f0
+0+1
⎤⎦⎥ ，即把每個點的橫座標分別乘以x，y，1相加後得到新點橫座標，把每個點縱座標分別乘以x，y，1得到新點縱座標。所以反過來把[(x,0),(0,y),(x0
,y0 )]分別除以x，y，1即可得到變換矩陣為：[(1,0),(0,1),(x0
,y0 )]，在css3中表示為(1,0,0,1,x0
,y0 )。
通過觀察發現座標軸上的點之間距離相等，所以可以用(1,0)，(0,1)代表x，y軸，這樣這兩個點加上原點變化後的座標即為需要的矩陣。這樣原始矩陣即為(1,0,0,1,0,0)。
2、 縮放
x、y軸分別縮放tx
，ty 倍後，(1,0)的新座標為(tx
,0)，(0,1)的新座標為(0,ty
)，原點不變，所以變換矩陣為(tx
,0,0,ty
,0,0)。
3、轉動
轉動即把x、y軸同時轉乙個角度，順時針角度為正，假設角度為θ，通過數學三角函式可以很容易求得轉動後的座標：(1,0)
⇒ (cosθ,sinθ )，(0,1)
⇒ (-sinθ,cosθ )，所以變換矩陣為(cosθ,sinθ,-sinθ,cosθ,0,0)
4、拉伸
拉伸分為x軸向拉伸和y軸向拉伸，設拉伸角分別為θx
，θy 。如圖：
則：(1,0)
⇒ (1,tanθy
)，(0,1)
⇒ (tanθx
,1)，
所以變換矩陣為(1,tanθy
,tanθx
,1,0,0)，所以發現x軸反向拉伸角度為正。
5、其它變換
(1)有了上述理解後其它變換就容易了，比如把一張左右顛倒:
只要把x軸點取反即可，(1,0)
⇒ (-1,0)
所以變換矩陣為(-1,0,0,1,0,0)。
如果想把沿著y=kx的直線翻轉，設(1,0)的對稱點座標(x1
,y1 )，由數學知識可以得到方程組y1
x1−1
=−1k
，y12
=kx1
+12 可得到x1
=1−k
21+k
2 ，y1
=2k1
+k2 。
設(0,1)的對稱點座標為(x2
,y2 )，可得到方程組y2
−1x2
=-1k
，y2+
12=k x2
2 可得到 x2
=2k1
+k2 ，y2
=k2−
11+k
2 ，所以變換矩陣為(1
−k21
+k2,
2k1+
k2,2
k1+k
2,k2
−11+
k2,0
,0)
取k=2，變換為：
(2)不僅可以以(1,0)，(0,1)作為基點，可以取任意點作為基點，只要除以相應的倍數就可以得到變換矩陣的值，如把作如下轉換
只要知道兩個對角點座標分別除以寬度、高度的一半即可得到變換矩陣。
變形 矩陣 matrix
matrix 是乙個含六個值的 a,b,c,d,e,f 變換矩陣，用來指定乙個2d變換，相當於直接應用乙個 a b c d e f 變換矩陣。就是基於水平方向 x軸 和垂直方向 y軸 重新定位元素,此屬性值使用涉及到數學中的矩陣，我在這裡只是簡單的說一下css3中的transform有這麼乙個屬性值...
python 翻轉matrix矩陣
題目 給定 matrix 1,2,3 4,5,6 7,8,9 原地旋轉輸入矩陣，使其變為 7,4,1 8,5,2 9,6,3 思路 先沿對角線翻轉，然後沿著中間豎線翻轉。coding utf 8 def print matrix matrix for i in range len matrix ou...
NumPy 陣列 Matrix矩陣
矩陣和陣列的區別，這篇介紹較為詳細 補充一點 numpy 陣列 np.array 可以生成n維陣列，即可以生成一維陣列 二維陣列 三維陣列等任意維數的陣列。數學上將一維陣列稱為向量，將二維陣列稱為矩陣。另外，可以將一般化之後的向量或矩陣等統稱為張量 tensor 一般將將二維陣列稱為 矩陣 將三維陣...