css关于matrix2d变换的问题

Question

如图

矩阵下面[0 0 1]一行有什么用，为什么是[0 0 1]不是[0 0 0]

Answer 1

[0, 0, 0] 的话效果就和二阶矩阵一样了，二阶矩阵不能计算平移，实际上就是 e、f 两个参数会丢失，最终结果就是 2D 变换中使用较为频繁的 translate效果没法用矩阵表示。
还有一个更为通俗也更为抽象的表述——仿射变换其实是 3D 变换在 2D 坐标系的投影，所以需要使用三阶矩阵。由于 2D 显示不需要 z 参数，矩阵第三行前两个参数可以是任何值，包括 0；第三行第三个参数则可以是任何非 0 值，那么 1 应该是最佳选择了。这样说很抽象，但是看到下图¹你就明白了：

---

1. 如何通俗地讲解「仿射变换」这个概念？ - 马同学的回答 - 知乎 ↩

Answer 2

没有人回答，我自己自问自答一下。平面坐标系做出的变换只能是基于原点的图形变化，放大或者缩小，并不能脱离原点的位移变换。所以需要2d图形放到空间坐标系中，通过空间坐标系基于原点的变换产生的高度为1的平行四边体的正上方的面形成脱离原点的位移，所以有了[x y 1](z为常量1，四边体的高度为1)，[a c e b d f 0 0 1]可以看成是基于空间坐标系的基向量a，b，c经过几何变换后得到的向量(a b 0), (c d 0), (e f 1),最后所求的平行四边体高度为1，所以z轴的基向量c变换后的z坐标为1。