CSS transform matrix(a, b, c, d, tx, ty) 原理

CSS transform matrix(a, b, c, d, tx, ty) 原理

背景：

图形变换 (计算机图形学):

用n+1维向量表示n维向量的方法称为齐次坐标表示法。如n维向量(P1，P2，…，Pn)可表示为(hP1，hP2，…，hPn，h)，其中h称为哑坐标。因为h可以取不同的值，所以同一点的齐次坐标不是唯一的。如普通坐标系下的点(2，3)变换为齐次坐标可以是(1，1.5，0.5)、(4，6，2)、(6，9，3)等。

...略略略

2D图形变换

齐次坐标表示法:

Note: 图形变换使用的是局部坐标，浏览器中局部坐标通常x轴方向向左，y方向向下。

Usage

\(transform: matrix(a, b, c, d, t_{x}, t_{y})\)

<img 
    style="transform: rotate(90deg);
    transform-origin: bottom left;" 
    src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png"
    >

<!-- 等效矩阵变化为： -->
    
<img 
    style="transform: matrix(0, 1, -1, 0, 0, 0);
    transform-origin: bottom left;" 
    src="https://mdn.mozillademos.org/files/12539/Screen%20Shot%202016-02-16%20at%2015.53.54.png"
    >

Summary

虽然CSS 提供了更加简洁的图形变换function (e.g. translate, scaleX, skewY, ...etc)，但是如果放着线性代数的矩阵知识不用，知识就会退化。而且为了和普通青年区分开来，我建议文艺青年都用矩阵来做图形变换（emmmm，这样子说会不会被打）。

另外，如果对相关知识有困惑或者想学习3D图形变换的变换矩阵，请查阅矩阵及计算机图形学相关资料。

参考资料：

Describing transformations mathematically