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图形变换的变换矩阵,请查阅矩阵及计算机图形学相关资料。
参考资料: