線性代數/矩陣的幾何意義

大廠技術  堅持周更  精選好文前言
為啥講數學？無意間發現了一個寶藏up主3Blue1Brown[1]在看視頻的時候，偶然發現一個集合：線性代數的本質。突然想起上學的時候矩陣論（線性代數）老師總說矩陣很優美，但我又一直沒get到，所以好奇想看一看。但是有沒有啥用呢？在評論裡看到矩陣是圖形學的基礎，於是搜了下，發現它比我想的有用多了！只要涉及到圖形學，矩陣都是繞不開的，比如webgl等等；但是和我們前端的大部分日常工作關係不大，講了大家會有興趣嗎？純講理論能講的明白不？於是我突然想到transform裡用到了矩陣，是一個合適的實踐例子至此，我發現矩陣既有意思，又有意義，又可以有實踐例子（transform），於是有了這篇文章。文中會涉及到一些最基本的矩陣運算，所以需要學過線性代數/矩陣論。只要學過就行，忘記了沒關係，提示一下稍微有點印象就行！講什麼？幾乎所有的學科（理工科）都要學線性代數，比如計算機科學、物理學、電子工程學、機械工程學、統計學等等。我們學習了如何計算矩陣：數乘、叉乘、特徵值等，但是也只限於計算，大家會不會有以下幾個疑問：我們學的很多課程，大家可能都有這個疑惑，甚至至今也不清楚。對於線性代數，今天分享的目的就是希望能回答這些問題。線性代數，我們只學了它的計算，但其實更重要的是它的幾何含義。計算只是解決問題的工具，而明白其幾何含義幫助我們知道解決什麼問題要用什麼工具，以及如何解讀最終結果的含義。好了廢話這麼多，主要是想激發大家的興趣，希望大家不要因為滿篇的公式而覺得枯燥，內容其實不複雜也很有意思。當然這建立在我能傳達出我想講的東西，我儘量做到。一部分：內容來自於寶藏up主的線性代數合集[2]，主要是講一些基本矩陣運算的幾何含義，我按我的理解分享下，更多精彩推薦大家去看原視頻。二部分：通過transform的矩陣，來消化所講的內容。矩陣基本運算如果直接告訴大家矩陣是如何表示幾何意義的，其實這樣大部分人也能記住且很好的應用，但是還是希望大家能真正地理解原因，所以先講一些基礎。向量及基本運算矩陣的基礎是向量，我們先來看看向量。向量在不同學科眼裡是不同的東西，甚至於它可以是任何東西，只要保證其相加和數乘有意義即可。為什麼只需要相加和數乘，一會下面會說明：只需要這2種運算，就可以到達空間內的任何一點。

一個向量可以表示為

相加

將向量看成一個運動，從原點出發，向

數乘

將

通過這2個基，再利用數乘線性組合，整個二維平面盡在掌握。那我們改變基坐標，是不是每一對基坐標都可以掌握整個平面呢？不是。當2個基向量正好共線時，它們的線性組合永遠都只能是一條線；而當2個向量都為零向量時，它們的線性組合永遠只能待在原點。換成術語，我們將所有可以表示為給基向量線性組合的向量的集合稱為給定向量所張成的空間，從剛剛的描述可知，對於大部分二維向量，它們張成的空間是整個二維平面，小部分情況下也可能是一條直線或者一個點。如果一個向量不會對張成的空間做出任何貢獻，也就是空間向量的一組基是張成該空間的一個線性無關的向量集。到這裡我們可以發現，只要通過向量的數乘和相加，我們就可以張成整個對應維度的空間，也就是達到整個對應維度空間內的任意點。矩陣和線性變換以上向量是基礎運算，一切都是為了更好的理解矩陣運算。很遺憾，矩陣是什麼是說不清的，你必須得自己看看。——墨菲斯函數是將一個輸入經過一些處理變為一個輸出，如y=f(x)。那向量的運算a=L(b)也是如此，為什麼我們不把向量的運算叫函數，而都是叫向量變換/矩陣變換呢。這提醒我們要用運動的思想看待向量的計算，或者換一種說法，矩陣/向量變換是對空間的變換。說明一點，比函數稍微簡單的是，矩陣變化都是線性變換（因為都是依賴向量數乘和相加）。視頻中提到一個問題：對於平面上的一個輸入該給計算機一個什麼公式L，才能得到只需要關注這對基的線性變換，我們就可以得到整個平面的線性變換，也就是公式L。

我們將變化後的2個基向量按如下方式放入矩陣，這樣這個矩陣

矩陣向量相乘理解一個【矩陣是一次對空間的變換，且其中2列分別為經過變換後的基向量

以上其實我們就得到了矩陣向量向量相乘的幾何意義：一個向量  左乘一個矩陣

以上整個過程，我們學習矩陣乘法時都是直接背下來的，而明白了它的幾何意義後，希望大家可以每次在用到的時候思考下其背後的幾何意義——對空間的多次相繼變換，這樣對矩陣會有一個更好的認識。乘法結合律和交換律如果大家還有點印象的話，矩陣是滿足乘法結合律，而不滿足乘法交換律的。為什麼是這樣呢？通過幾何意義，我們可以很好地理解原因。等式左邊表示：先進行
矩陣的運算順序是從右往左，可能不太符合常規習慣。不過想一想前面提到的，矩陣運算其實就是對空間進行函數運算，再結合複合f(g(x))的寫法：先計算g(x)，再計算f(g(x))，就不難理解了。行列式其實講到的東西已經足以說明了矩陣的幾何意義，後續提到的transform也只需要以上理解就可以了，不過我還是想繼續抽一個其他概念簡述一下，以說明矩陣的其他各種概念也都有著其相對應的實際(幾何)意義。如果大家還有印象，行列式的計算規則為 表示空間上一個單位面積被縮放的倍數。再恢復b不為0，這樣

所以，矩陣的行列式表示的是：經過矩陣變換後，平面單位面積的縮放倍數。想一想對於公式det(

transform: matrix(a,b,c,d,e,f) 
其對應的矩陣為A = 
因此保持
小結：translate僅需用到參數e和f，translate(e,f)對應matrix(1，0，0，1，e，f)。scalescale屬性表示對元素的縮放，也就是坐標系縮放了，但是不會變形；即只進行矩陣的數乘變換，小結：scale僅需用到參數a和d，scale(a, b)對應matrix(a，0，0，d，0，0)。rotaterotate屬性表示對元素的旋轉，這裡就涉及到三角函數。旋轉
小結：rotate需用到參數a、b、c和d，rotate()對應matrix(
.element{
    transform: translate(50px, 0) scale(0.5); 
}
.element{
    transform: scale(0.5) translate(50px, 0); 
}
上面我們提到，每次矩陣左乘是一次變換，多次變換就多次左乘即可。假設Translate的矩陣為當前元素所在的整個平面的變換而不是僅針對當前元素，我們就能正確的組合使用了。另外，知道了組合使用實際上只是矩陣相乘，我們也可以連續使用相同的屬性（不一定需要使用calc），比如：transform: translate(100%, 0) translate(50px, 0);，先右移100%，再右移50pxtransform: scale(2) scale(3);先放大2倍，再基於此放大3倍，共2*3=6倍，而不是2+3=5倍。思考：非方陣上面提到的m * n矩陣都是方陣，即行數m和列數n相等的矩陣。那非方陣代表著什麼呢？這裡就不提供答案了，如果理解了上面的內容，相信很容易想清楚~ 本文只提到了矩陣的一些基本性質，但其實這些基礎性質就足以說明了其幾何意義，如果大家以後看到矩陣能想到去想一想它的幾何意義，那本次分享的目的就達到啦！ps：看過視頻之後，我去網上查過一些關於這方面的文章，由於這本身是個用文字很難說清楚且很容易勸退的主題，所以大多數文章都很難讓人看下去，本文也可能是這樣。所以我越發開心看到這個視頻合集，雖然以後也許不一定能用上，但它也帶來了那些看視頻的愉快時光，以及寫本文時的「才思泉湧」和熱情高漲🐶！參考[1]
3Blue1Brown: https://space.bilibili.com/88461692/
[2]
寶藏up主的線性代數合集: https://www.bilibili.com/video/BV1ys411472E
[3]
驗證demo: https://codepen.io/yh418807968/pen/bGgVvRM?editors=1111
[4]
demo: https://codepen.io/yh418807968/pen/Vwmdvaw
[5]
demo: https://codepen.io/yh418807968/pen/Vwmdvaw
❤️ 謝謝支持
以上便是本次分享的全部內容，希望對你有所幫助^_^
喜歡的話別忘了 分享、點讚、收藏 三連哦~。
歡迎關注公眾號 ELab團隊 收貨大廠一手好文章~
我們來自字節跳動，是旗下大力教育前端部門，負責字節跳動教育全線產品前端開發工作。
我們圍繞產品品質提升、開發效率、創意與前沿技術等方向沉澱與傳播專業知識及案例，為業界貢獻經驗價值。包括但不限於性能監控、組件庫、多端技術、Serverless、可視化搭建、音視頻、人工智慧、產品設計與營銷等內容。
歡迎感興趣的同學在評論區或使用內推碼內推到作者部門拍磚哦 🤪
字節跳動校/社招內推碼: W6WGRQM
投遞連結: https://jobs.toutiao.com/s/dPNW5wp