目录

css的transform样式计算-第一节

本文作者为 360 奇舞团前端开发工程师

引言

在使用 css 样式进行样式的缩放、旋转等设置时,思考了一下它的较浅层的原理,恩,这个阶段都 是一些初高的数学计算,从新看这里的时候顺便捡了捡初高中的数学,比如三角函数之类。

通用公式
image.png

假设 A * B = Y。其中,A 为 m * n 的 m 行 n 列矩阵,B 为 1 * n 列的矩阵。B 拆分为列向量,并且列向量的维数就是矩阵的行数。

方法

transform(a, b, c, d, e, f) 与 Matrix 的转换。
image.png

推导出来
image.png

简化后
image.png

缩放
image.png

推导出来
image.png

go 复制代码
.box {
  transform: scale(0.3, 0.6);
}

通过计算
image.png

等价于

go 复制代码
.box {
  transform: matrix(0.3, 0, 0, 0.6, 0, 0);
}

image.png

平移
image.png

推导出来
image.png

转旋
image.png

推导出来
image.png

假设存在点 E 移动至点 F。设 E 坐标为(x1, y1),F 坐标为(x2, y2),D 坐标为(a, b)。

简要图示:
image.png

初中数学:
image.png

演算:
image.png

推导:
image.png image.png

验证:
image.png

转换为矩阵:
image.png

从 css 语法上开始转换

go 复制代码
.box {
  transform: rotate(30deg);
}

这个旋转套用公式
image.png

等价于

go 复制代码
.box {
  transform: matrix(0.86, 0.5, -0.5, 0.86, 0, 0);
}

image.png

复合

go 复制代码
.box {
  transform: rotate(30deg) scale(0.3, 0.6);
}

复合需要进行矩阵乘法计算
image.png

等价于

go 复制代码
.box {
  transform: matrix(0.258, 0.15, -0.3, 0.516, 0, 0);
}

最后,后续本文修正和更新,请参阅:'https://kangkk.cn/index.php/计算机原理/仿射变换'

  • END -

关于奇舞团

奇舞团是 360 集团最大的大前端团队,代表集团参与 W3C 和 ECMA 会员(TC39)工作。奇舞团非常重视人才培养,有工程师、讲师、翻译官、业务接口人、团队 Leader 等多种发展方向供员工选择,并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。

本文是转载文章,点击查看原文
如有侵权,请联系 xyy@jishuzhan.net 删除
相关推荐
小满zs8 分钟前
React-router v7 第四章(路由传参)
前端·react.js
小陈同学呦17 分钟前
聊聊双列瀑布流
前端·javascript·面试
键指江湖1 小时前
React 在组件间共享状态
前端·javascript·react.js
诸葛亮的芭蕉扇1 小时前
D3路网图技术文档
前端·javascript·vue.js·microsoft
小离a_a1 小时前
小程序css实现容器内 数据滚动 无缝衔接 点击暂停
前端·css·小程序
徐小夕2 小时前
花了2个月时间研究了市面上的4款开源表格组件,崩溃了,决定自己写一款
前端·javascript·react.js
by————组态2 小时前
低代码 Web 组态
前端·人工智能·物联网·低代码·数学建模·组态
倒霉男孩2 小时前
CSS简介
css
拉不动的猪2 小时前
UniApp金融理财产品项目简单介绍
前端·javascript·面试
菜冬眠。2 小时前
uni-app/微信小程序接入腾讯位置服务地图选点插件
前端·微信小程序·uni-app