css transform的变换函数是否可以更改顺序

464 阅读3分钟

不可以。原因是矩阵乘法不满足交换律。

1.图像的变换包括旋转、缩放、平移等其本质都是原图像上的所有像素点按照一定规律进行了位置变换。我们假设原图像上的某一点位置坐标为(x,y),变换后的新图位置坐标为(x1,y1),(x1,y1)与(x,y)关系如下

x1 = ax + by + c

y1 = dx + ey + f

看到这,如果有一定的线性代数基础,我们就能发现一点端倪了。如果我们用一个矩阵来表示关系系数 a b c d e f 同时用一个矩阵来表示位置坐标(x,y)跟 (x1,y1),我们大约可以推测出新坐标矩阵x1,y1 可以用系数矩阵 a b c d e f 与原坐标矩阵x,y的乘积来表示。

2. 我们使用齐次坐标(x,y,1)来表示原图像某像素点位置,(x1,y1,1)来表示变换后的图像像素点位置。(为什么使用齐次坐标系可以单说了,为了表示平移,坐标第三个参数如果是0表示向量,如果是1表示点)。

   a b c            x              ax+by+c            x1

[ d e f ]   *   [ y ]   =   [ dx+ey+f ]  =   [ y1 ]

  0 0 1            1                  1                    1

3. 这时候我们再来看,缩放、旋转、平移这些就简单了。

如果想实现缩放0.5的效果,那么x1 = 0.5x, y1 = 0.5y,可推算出 a=0.5 b=0 c=0 d=0 e=0.5 f=0 ,矩阵表示就是
0.5  0     0
[  0    0.5  0 ]

0     0     1

如果想实现横向平移10则 x1 = x + 10,y1 = y,同理也很容易推算出变换矩阵了。旋转复杂点涉及到三角函数,假设旋转角度A x1 = cosAx - sinAy ,y1 = sinAx+cosAy。

4.理解了变换函数就是矩阵的另一种表示,我们再来看顺序。如果transform值是多个变换函数,那么是矩阵依次相乘。矩阵乘法满足交换律吗? 不满足,矩阵相乘,新矩阵的每个点的值是相对应的第一个矩阵的行向量与第二个矩阵的列向量相乘,如果矩阵位置交换了,能不能相乘都是个问题了更别提想等了。矩阵相乘必须第一个矩阵的列数等于第二个矩阵行数。比如一个3行4列乘4行5列矩阵,交换之后为4行5列矩阵乘3行4列矩阵,第一个矩阵列数5不等于第二个矩阵行数3,无效。

ps: 
1.css矩阵表示中a b c d e f 的顺序跟文中略有差别,同时矩阵第三行为固定的 0 0 1,css矩阵表示中也省略了这一行。

2.可以自己写一个demo验证一下,先平移后旋转 跟先旋转后平移的效果对比。

3. 可以继续研究下为什么平移跟其他旋转、倾斜、缩放不同。平移是否可以用矩阵加法来表示。

4.参考地址:

MDNdeveloper.mozilla.org/zh-CN/docs/…