css的transform样式计算-第一节

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

引言

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

通用公式

dd0cda9e6a0e1757158521cb48c42cde.png
image.png

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

方法

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

d6bd7d89578ed88d248239ed3147e367.png
image.png

推导出来

6dfac079a3c6bb673f79d82bc9501639.png
image.png

简化后

6ce0bc8071f22d734afc92edd836646a.png
image.png

缩放

8fe56a7a0044e945e0c0b34c37d1f7f2.png
image.png

推导出来

7c3271b4590b04934e3e3ebc1d0b0a68.png
image.png
.box {transform: scale(0.3, 0.6);
}

通过计算

110d7c1f7cf5eba9e0b0fef2805a2d7a.png
image.png

等价于

.box {transform: matrix(0.3, 0, 0, 0.6, 0, 0);
}
1a2137d51690fb0b17e8f30c9458a0a3.png
image.png

平移

487adda37ddcaf3c81144e2dc1a0147c.png
image.png

推导出来

9121456f05509fdb04657c6ed4213442.png
image.png

转旋

7cd41212eba12421caa10a78985c840a.png
image.png

推导出来

a521a27799a31729140b9e5b53d007c4.png
image.png

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

简要图示:

30955ceea9f9cdb1be81fc42b9543bdf.png
image.png

初中数学:

81a40f01f69674ca4539b7af173eb2ae.png
image.png

演算:

ef4647b4f06026ee8e0e30df3188b6df.png
image.png

推导:

70a743f721d9c0c26de5094c5f35d8cd.png
image.png
2b2bd94d767d29b6babf6e1eab5302e9.png
image.png

验证:

c12f8ce39ac985c6c6a902f6218c43d0.png
image.png

转换为矩阵:

e5771e861e8f983ac63e749e097bce0b.png
image.png

从 css 语法上开始转换

.box {transform: rotate(30deg);
}

这个旋转套用公式

ca7518b8bc12f437387a686b8857b633.png
image.png

等价于

.box {transform: matrix(0.86, 0.5, -0.5, 0.86, 0, 0);
}
4278a59a0d9daf3559c163a4d350ba42.png
image.png

复合

.box {transform: rotate(30deg) scale(0.3, 0.6);
}

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

951c64dd3311eee70a6942a4f57e5416.png
image.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 等多种发展方向供员工选择,并辅以提供相应的技术力、专业力、通用力、领导力等培训课程。奇舞团以开放和求贤的心态欢迎各种优秀人才关注和加入奇舞团。

4153ce9fe0c90a29d141884b4f51bed3.png

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.rhkb.cn/news/89884.html

如若内容造成侵权/违法违规/事实不符,请联系长河编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

利用 Splashtop Enterprise 改善公司的网络安全

在我们日益数字化的世界中,对强有力的网络安全措施的需求从未像现在这样迫切。随着组织扩大其数字足迹并采用远程办公解决方案,他们面临着一系列不断变化的挑战。 威胁行为者不断寻找利用漏洞的新方法,这使得企业保持领先地位至关重要。俗话…

htmlCSS-----弹性布局

目录 前言 什么是弹性布局 样式 学习概要 容器和项目 弹性布局的排列方式 1.横向排列(默认样式) 2.父元素容器的属性(*5) (1)主轴 代码示例: (2)交叉轴 3.子元素…

Stable Diffusion WebUI安装和使用教程(Windows)

目录 下载Stable Diffusion WebUI运行安装程序,双击webui.bat界面启动插件安装(github)模型下载(有些需要魔法)安装过程遇到的大坑总结参考的博客 整个过程坑巨多,我花了一个晚上的时间才全部搞定,本教程针对有编程基础…

分布式系统监控zabbix安装部署及使用

分布式系统监控zabbix安装部署及使用 一.zabbix监控 1.什么是zabbix zabbix:是一款开源免费的,自动化发现服务与网络设备的分布式监控,可以监视应用层服务并以web前端页面集中管理并展示。 2.zabbix功能 监控服务器cpu负载、服务器内存使…

adb 通过wifi连接手机

adb 通过wifi连接手机 1. 电脑通过USB线连接手机2. 手机开启USB调试模式,开启手机开发者模式3.手机开启USB调试模式 更多设置-》开发者选项-》USB调试4.点击Wi-Fi 高级设置,可以查看到手机Wi-Fi的IP地址,此IP地址adb命令后面的ip地址&#xf…

2023年国赛数学建模思路 - 案例:ID3-决策树分类算法

文章目录 0 赛题思路1 算法介绍2 FP树表示法3 构建FP树4 实现代码 建模资料 0 赛题思路 (赛题出来以后第一时间在CSDN分享) https://blog.csdn.net/dc_sinor?typeblog 1 算法介绍 FP-Tree算法全称是FrequentPattern Tree算法,就是频繁模…

消息队列(11) - 通信协议的设计

目录 通信协议设计代码实现 通信协议设计 对于我们客户端与服务器之间的通信协议我们约定如下: 具体的协议设计: 之后我们传递的参数也是这些 关于 type其实是在描述当前这个请求 、 响应是在调用那个API 约定如下 对于channel ,是tcp链接中的一个逻辑上的链接,…

液体神经网络:LNN是个啥概念?

一、说明 在在人工智能领域,神经网络已被证明是解决复杂问题的非常强大的工具。多年来,研究人员不断寻求创新方法来提高其性能并扩展其能力。其中一种方法是液体神经网络(LNN)的概念,这是一个利用动态计算功能的迷人框…

IDEA如何调试Stream API

Stream API现在在实际开发中应用非常广泛,经常会遇到需要调试Stream API的场景,这篇文章主要讲解如何使用IDEA调试Stream Testpublic void test(){Stream.of(10, 20, 30, 40, 50).mapToInt(e->e*10).filter(e->e>200).forEach(System.out::pri…

笔记04:全局内存

一、CUDA内存模型概述 寄存器、共享内存、本地内存、常量内存、纹理内存和全局内存 一个核函数中的线程都有自己私有的本地内存。 一个线程块有自己的共享内存,对同一个线程块中所有的线程都可见,其内容持续线程块的整个生命周期。 所有线程都可以访问…

12.Eclipse导入Javaweb项目

同事复制一份他的项目给我ekp.rar (懒得从SVN上拉取代码了)放在workspace1目录下 新建一个文件夹 workspace2,Eclipse切换到workspace2工作空间 选择Import导入 选择导入的项目(这里是放到workspace1里面) 拷贝一份到workspace2里面 例子 所有不是在自己电脑上开发…

搭建openGauss 5.0 一主一从复制集群

openGauss是一款支持SQL2003标准语法,支持主备部署的高可用关系型国产数据库。 多种存储模式支持复合业务场景,新引入提供原地更新存储引擎。NUMA化数据结构支持高性能。Paxos一致性日志复制协议,主备模式,CRC校验支持高可用。支…

数字孪生如何实现物理世界和数字世界之间的交互?

在当今数字化时代,技术的飞速发展正在引领着各行各业的变革与创新。其中,数字孪生作为一项令人振奋的前沿技术,正在以惊人的方式实现着物理世界与数字世界的无缝交互。它不仅为企业带来了全新的商机,也为科学研究、生产制造等领域…

打造企业或者个人IP引流法

打造企业或者个人IP引流法. 大家好,我是百收网SEO编辑:狂潮老师,今天给大家分享企业IP打造的方法 首先我们想让人知道你的企业叫什么,怎么找到你的企业 这个时候我们就需要去各大平台发布信息,客户想了解直接去搜索…

php webshell 免杀入门

webshell 查杀软件: d盾、安全狗、护卫神、Sangfor WebShellKill 在线查杀 百度WEBDIR https://scanner.baidu.com 河马 https://www.shellpub.com cloudwalker牧云 https://webshellchop.chaitin.cn 查杀技术 静态检测、动态检测、日志检查 静态检查&#xff1a…

OceanBase 4.1.0 clog 目录探究

基于OceanBase 4.x 版本如何统计租户每日 clog 日志生成量的背景下,探究以及如何查看租户 clog 的使用情况。 作者:姜宇 爱可生 DBA 团队成员,擅长数据库故障排查和处理。对技术抱有热忱,实践是检验真理的唯一标准~ 本文来源&…

高忆管理:爆仓是什么意思?

爆仓是指在金融商场中,持有的某种资产价格大幅下跌,导致出资者的保证金不足以支持持仓,被逼平仓的现象。在股票、期货、外汇等商场中均或许呈现爆仓现象。在本文中,咱们将从多个视点分析爆仓的含义、原因和影响。 一、爆仓的含义 …

Azure概念介绍

云计算定义 云计算是一种使用网络进行存储和处理数据的计算方式。它通过将数据和应用程序存储在云端服务器上,使用户能够通过互联网访问和使用这些资源,而无需依赖于本地硬件和软件。 发展历史 云计算的概念最早可以追溯到20世纪60年代的时候&#x…

IDEA创建项目常见问题

1.IDEA修改maven路径无效 创建spring项目,Maven导入报错,无法正常导入jar报,发现setting中设置的maven路径不是自己下载的路径,修改后无效。运行之后maven路径又恢复为其默认的路径 解决方案: 删除.mvn文件&#xff0…

Grafana监控 Redis Cluster

Grafana监控 Redis Cluster 主要是使用grafana来实现监控,grafana可以对接多种数据源,在官网中可以找到Redis数据源,需要安装redis data source插件。当然也可以利用Prometheus来做数据源,下面分别记录一下这两种数据源的安装配置…