本文作者为 360 奇舞团前端开发工程师
引言
在使用 css 样式进行样式的缩放、旋转等设置时,思考了一下它的较浅层的原理,恩,这个阶段都 是一些初高的数学计算,从新看这里的时候顺便捡了捡初高中的数学,比如三角函数之类。
通用公式
![dd0cda9e6a0e1757158521cb48c42cde.png](https://img-blog.csdnimg.cn/img_convert/dd0cda9e6a0e1757158521cb48c42cde.png)
假设 A * B = Y。其中,A 为 m * n 的 m 行 n 列矩阵,B 为 1 * n 列的矩阵。B 拆分为列向量,并且列向量的维数就是矩阵的行数。
方法
transform(a, b, c, d, e, f) 与 Matrix 的转换。
![d6bd7d89578ed88d248239ed3147e367.png](https://img-blog.csdnimg.cn/img_convert/d6bd7d89578ed88d248239ed3147e367.png)
推导出来
![6dfac079a3c6bb673f79d82bc9501639.png](https://img-blog.csdnimg.cn/img_convert/6dfac079a3c6bb673f79d82bc9501639.png)
简化后
![6ce0bc8071f22d734afc92edd836646a.png](https://img-blog.csdnimg.cn/img_convert/6ce0bc8071f22d734afc92edd836646a.png)
缩放
![8fe56a7a0044e945e0c0b34c37d1f7f2.png](https://img-blog.csdnimg.cn/img_convert/8fe56a7a0044e945e0c0b34c37d1f7f2.png)
推导出来
![7c3271b4590b04934e3e3ebc1d0b0a68.png](https://img-blog.csdnimg.cn/img_convert/7c3271b4590b04934e3e3ebc1d0b0a68.png)
.box {
transform: scale(0.3, 0.6);
}
通过计算
![110d7c1f7cf5eba9e0b0fef2805a2d7a.png](https://img-blog.csdnimg.cn/img_convert/110d7c1f7cf5eba9e0b0fef2805a2d7a.png)
等价于
.box {
transform: matrix(0.3, 0, 0, 0.6, 0, 0);
}
![1a2137d51690fb0b17e8f30c9458a0a3.png](https://img-blog.csdnimg.cn/img_convert/1a2137d51690fb0b17e8f30c9458a0a3.png)
平移
![487adda37ddcaf3c81144e2dc1a0147c.png](https://img-blog.csdnimg.cn/img_convert/487adda37ddcaf3c81144e2dc1a0147c.png)
推导出来
![9121456f05509fdb04657c6ed4213442.png](https://img-blog.csdnimg.cn/img_convert/9121456f05509fdb04657c6ed4213442.png)
转旋
![7cd41212eba12421caa10a78985c840a.png](https://img-blog.csdnimg.cn/img_convert/7cd41212eba12421caa10a78985c840a.png)
推导出来
![a521a27799a31729140b9e5b53d007c4.png](https://img-blog.csdnimg.cn/img_convert/a521a27799a31729140b9e5b53d007c4.png)
假设存在点 E 移动至点 F。设 E 坐标为(x1, y1),F 坐标为(x2, y2),D 坐标为(a, b)。
简要图示:
![30955ceea9f9cdb1be81fc42b9543bdf.png](https://img-blog.csdnimg.cn/img_convert/30955ceea9f9cdb1be81fc42b9543bdf.png)
初中数学:
![81a40f01f69674ca4539b7af173eb2ae.png](https://img-blog.csdnimg.cn/img_convert/81a40f01f69674ca4539b7af173eb2ae.png)
演算:
![ef4647b4f06026ee8e0e30df3188b6df.png](https://img-blog.csdnimg.cn/img_convert/ef4647b4f06026ee8e0e30df3188b6df.png)
推导:
![70a743f721d9c0c26de5094c5f35d8cd.png](https://img-blog.csdnimg.cn/img_convert/70a743f721d9c0c26de5094c5f35d8cd.png)
![2b2bd94d767d29b6babf6e1eab5302e9.png](https://img-blog.csdnimg.cn/img_convert/2b2bd94d767d29b6babf6e1eab5302e9.png)
验证:
![c12f8ce39ac985c6c6a902f6218c43d0.png](https://img-blog.csdnimg.cn/img_convert/c12f8ce39ac985c6c6a902f6218c43d0.png)
转换为矩阵:
![e5771e861e8f983ac63e749e097bce0b.png](https://img-blog.csdnimg.cn/img_convert/e5771e861e8f983ac63e749e097bce0b.png)
从 css 语法上开始转换
.box {
transform: rotate(30deg);
}
这个旋转套用公式
![ca7518b8bc12f437387a686b8857b633.png](https://img-blog.csdnimg.cn/img_convert/ca7518b8bc12f437387a686b8857b633.png)
等价于
.box {
transform: matrix(0.86, 0.5, -0.5, 0.86, 0, 0);
}
![4278a59a0d9daf3559c163a4d350ba42.png](https://img-blog.csdnimg.cn/img_convert/4278a59a0d9daf3559c163a4d350ba42.png)
复合
.box {
transform: rotate(30deg) scale(0.3, 0.6);
}
复合需要进行矩阵乘法计算
![951c64dd3311eee70a6942a4f57e5416.png](https://img-blog.csdnimg.cn/img_convert/951c64dd3311eee70a6942a4f57e5416.png)
等价于
.box {
transform: matrix(0.258, 0.15, -0.3, 0.516, 0, 0);
}
最后,后续本文修正和更新,请参阅:'https://kangkk.cn/index.php/计算机原理/仿射变换'
- END -
关于奇舞团
奇舞团是 360 集团最大的大前端团队,代表集团参与 W3C 和 ECMA 会员(TC39)工作。奇舞团非常重视人才培养,有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择,并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。