理解transform中的matrix

落日映苍穹つ 2023-07-25 09:17 6阅读 0赞

CSS中有个函数，改变六个数值就可以实现平移、旋转、缩放等2D变换效果。那么问题来了：

*  为什么是六个值？
 *  修改哪些值可以实现不同的效果？
 *  为什么修改这些值可以实现这样的效果？

本文探讨其背后原理，先在二维坐标系下推导公式，最后用齐次坐标统一形式。

## 二维平移 ##

![format_png][]

假设将点移动距离到点。写出方程式：

用矩阵形式来表示二维平移方程：

## 二维旋转 ##

![format_png 1][]

点原始角度位置与水平线的夹角是，是旋转角，点到原点的固定距离是。

在极坐标下，点的位置用点到原点的距离和水平线夹角的角度表示，点的极坐标表示为。

![format_png 2][]

极坐标系转换为直角坐标系：

代入上述公式得到：

矩阵形式：

> 这个公式的旋转中心是原点，若是以任意点为旋转中心呢？css里的默认变换中心是对象中心,transform-origin可以指定变换中心，我猜测是先平移到原点进行变换，再平移回原位置，如果你知道答案请告诉我。

## 二维缩放 ##

![format_png 3][]

和是缩放系数，在x轴方向缩放对象，在y轴缩放对象。注意此时既缩放，又重定位。

方程：

矩阵形式：

> 缩放公式也是以原点为基准点进行缩放。指定固定点，只缩放不改变位置，我猜测也是先平移，缩放，再平移。

## 齐次坐标 ##

将二维坐标位置表示扩充到三维表示，称为**齐次坐标**，齐次参数是一个非零值。此处

一般设置，就可以用矩阵相乘的形式来表示所有的几何变换公式。

### 平移 ###

### 旋转 ###

### 缩放 ###

## transform的matrix ##

到这一步就得知六个值得起源以及修改哪些值可以实现相应的效果了，使用时套用公式即可。

## 栗子 ##

### 平移 ###

transform: matrix(1,0,0,1,50,50);

![format_png 4][]

### 旋转 ###

若旋转角度为30°

transform: matrix(0.866025,0.500000,-0.500000,0.866025,0,0);

![format_png 5][]

### 缩放 ###

若比例均为2

transform: matrix(2, 0,0,2,0,0)

![format_png 6][]

如此一来，如果你想实现其他变换效果，也可以按照同样的思路，一步步推导结果。

> 例如

### 变形 ###

MDN中已给出结果，来玩玩儿：

![format_png 7][]

transform: matrix(1, 1, 0, 1, 0, 0)

![format_png 8][]

### 复合变换 ###

平移 + 缩小，将变换矩阵相乘即可

transform: matrix(0.5, 0, 0, 0.5, 25, 25)

![format_png 9][]

### 参考资料 ###

*  使用的绘图工具：GeoGebra  
    
 *  配色参考：经典三原色 + NIPPON COLORS
 *  LateX语法写公式
 *  计算机图形学（第三版）—— Donald Hearn/M.Pauline Baker著
 *  线性代数简明教程第二版——陈维新/编著

[format_png]: /images/20230528/88fc23e5b1774adfac9c6530b7222e53.png
[format_png 1]: /images/20230528/3b70e48e56634913a5c0528c40d0becc.png
[format_png 2]: /images/20230528/6ae55105601d4b7a8288ba04820d484a.png
[format_png 3]: /images/20230528/29ac70633ef940209cec030d7b123fc1.png
[format_png 4]: /images/20230528/f67d3f2659574c35aa08954faaf1a3a1.png
[format_png 5]: /images/20230528/5f1ac690cfb34949a9fe6ac0460b13be.png
[format_png 6]: /images/20230528/866426d7cb15437381ed9e289165a0ae.png
[format_png 7]: /images/20230528/b314b517007a46de8ad875dbcaeec589.png
[format_png 8]: /images/20230528/108c455ef630464e83a3cd7635ec3e4c.png
[format_png 9]: /images/20230528/ba05f4b7a9ae45d4ac60fd42b35c81f4.png