前言：前端为什么要学线性代数？
"我一个写页面的，学什么线性代数？"——三年前的我也是这么想的。直到有一天我被 CSS 的 transform: matrix() 折磨得死去活来。
你知道吗？transform: rotate(45deg) 在浏览器底层其实会被转成 transform: matrix(0.7071, 0.7071, -0.7071, 0.7071, 0, 0)。六个数字，排列组合一下，就能实现旋转、缩放、平移、斜切。这不就是线性代数吗？
矩阵：就是一个"转换盒子"
别被"矩阵"这个名字吓到。你就把它想象成一个加工厂：你丢一个坐标进去，它给你吐出一个新坐标。
// 二维变换矩阵（2x3）
// [a, c, tx]
// [b, d, ty]
//
// matrix(a, b, c, d, tx, ty)
// 新x = a*x + c*y + tx
// 新y = b*x + d*y + ty
比如你想把一个点 (1, 0) 旋转 90 度：
cos(90°) = 0, sin(90°) = 1
matrix(0, 1, -1, 0, 0, 0)
新x = 0*1 + (-1)*0 + 0 = 0
新y = 1*1 + 0*0 + 0 = 1
(1, 0) → (0, 1) ✓ 旋转成功！
看，你其实一直在线性代数的世界里，只是你自己不知道。
矩阵乘法：套娃谁不会啊
矩阵乘法看着吓人，其实就是一个词：套娃。
先旋转再平移：平移矩阵 × 旋转矩阵 × 坐标。注意顺序！先旋转再平移和先平移再旋转，结果不一样。你试试把手机拿在手里，先左转 90 度再往前推，和先往前推再左转 90 度——位置不一样吧？
这就是矩阵乘法不满足交换律：A × B ≠ B × A。
向量：带方向的箭头
向量就是个箭头，有方向有长短。CSS 里 translate(x, y) 不就是个向量吗？往前走 10px，往下走 20px，这就是向量加法。
// 向量加法：箭头连起来
[10, 20] + [30, -5] = [40, 15]
// 你先往右走10步往上走20步
// 再往右走30步往下走5步
// 等于往右走40步往上走15步
简单吧？所以向量就是个方便你算位置的工具。
Canvas/WebGL 里的矩阵
如果你用 Canvas 2D，ctx.setTransform(a, b, c, d, e, f) 就是直接操作矩阵。WebGL 更是矩阵的天下——模型矩阵、视图矩阵、投影矩阵，三件套安排上。
想象你在拍照片（3D 渲染）：
- 模型矩阵：把物体摆到场景里（"这个茶壶放桌上"）
- 视图矩阵：把相机对准物体（"我站这里拍"）
- 投影矩阵：决定照片是广角还是长焦（"用 50mm 镜头"）
三个矩阵一乘，屏幕上的像素就出来了。你在浏览器里看到的每一个 3D 游戏，背后都是矩阵在疯狂运算。
总结：现在你也是"线性代数懂王"了
矩阵就是一个表格，向量就是一个箭头，矩阵乘法就是套娃。下次面试官问你线性代数，你就说："我每天写 CSS transform 的时候都在用矩阵，要不咱聊聊 WebGL 的投影矩阵？" 保证面试官对你刮目相看。
记住：万物皆矩阵，不懂就变换。🤪