Matrix 矩阵

CSS3中的矩阵指的是一个方法，书写为matrix()和matrix3d()，前者是元素2D平面的移动变换(transform)，后者则是3D变换。2D变换矩阵为3*3, 如上面矩阵示意图；3D变换则是4*4的矩阵。

transform 里面的：斜拉(skew)，缩放(scale)，旋转(rotate)以及位移(translate)。本质上就是通过matrix实现的快捷方法(注意：translate, rotate等方法都是需要单位的，而matrix方法e, f参数的单位可以省略。)

transform-origin: 50px 70px; （向左移50，向上移70）代表的是transform的中心点（也就是下面的x, y）

开始：

transform: matrix(a,b,c,d,e,f);

（a表示缩放x轴，b和c影响拉伸，d表示缩放y轴，e水平偏移距离，f垂直偏移距离）

实际上，这6参数，对应的矩阵就是：

矩阵计算：

ax+cy+e，是由3*3矩阵每一行的第1个值与后面1*3的第1个值相乘，第2个值与第2个相乘，第3个与第3个，然后相加。ax+cy+e为变换后的水平坐标，bx+dy+f表示变换后的垂直位置。

举例：

transform: matrix(1, 0, 0, 1, 30, 30); /* a=1, b=0, c=0, d=1, e=30, f=30 */

假设元素中心点为： x = 0; y = 0;

变换后的x坐标就是ax+cy+e = 1*0+0*0+30 =30, y坐标就是bx+dy+f = 0*0+1*0+30 =30

也就是元素从(0, 0) 移动到右下方 (30, 30)(等同于transform: translate(30px, 30px);)

http://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/

转载于:https://www.cnblogs.com/chuangweili/p/5166518.html

Matrix 矩阵相关推荐

Android 自定义View ——Matrix (矩阵)
Matrix的作用: Matrix类包含一个3x3矩阵,用于转换坐标 Matrix (矩阵) 的原理很遗憾自己目前也是含糊的很,这里就不说了,记录自己在项目使用的方法, 这里就简单的记录下Matrix ...
R语言使用upper.tri函数、lower.tri函数、diag函数改变matrix矩阵上三角形、下三角形、对角线的数值
R语言使用upper.tri函数.lower.tri函数.diag函数改变matrix矩阵上三角形.下三角形.对角线的数值目录
理解CSS3 transform中的Matrix(矩阵)
一.哥,我被你吓住了打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如"拉普拉斯不等式").这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面& ...
汉高澳大利亚matrix矩阵计算器
我在梦中的超级计算机超级计算机锯,使用大量阵列的cpu记忆,完成并行计算.一个手机制造商由于使用普通机械提供的服务,往往造成停机.是铁道部列车网络售票的事实. 无法使用云服务.上万台计算机并行处理,因 ...
JavaScript实现完整的matrix矩阵类（附完整源码）
JavaScript实现完整的matrix矩阵类(附完整源码) matrix.js完整源代码 matrix.js完整源代码 export const shape = (m) => {const ...
7-67 使用二维数组实现Matrix(矩阵)。 (60 分)
使用二维数组实现Matrix(矩阵). 定义Matrix(矩阵)类,要求如下: a) 变量:matrix(int型二维数组),row(行数),column(列数): b) 方法:实现两个矩阵的乘法,所 ...
【CSS3】理解CSS3 transform中的Matrix(矩阵)
理解CSS3 transform中的Matrix(矩阵) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu ...
汉澳matrix矩阵电脑
我在梦中看到超级计算机是超算电脑,采用大量阵列cpu和内存,完成并发计算.有个手机厂家提供服务因为使用普通机器,导致经常宕机,其实铁道部火车网络售票就是. 因为不能采用云服务,上万台计算机并行处理,所 ...
LearnGL - 06.1 - Matrix - 矩阵02 - 向量空间、向量空间的维度、为何矩阵乘法要有 [M x N] * [N * P] 的 N 要相等的限制
文章目录矩阵乘法为何有维度限制? 什么是向量空间? 什么是向量空间的维度? 理解为何有这个限制 LearnGL - 学习笔记目录本人才疏学浅,如有什么错误,望不吝指出. 上一篇:LearnGL - ...
一、Android Matrix 矩阵
一.Android矩阵大学学的线性代数和矩阵基本忘记的差不多了,理解起矩阵Matrix着实有点费劲,记了一次笔记还把左乘右乘记错了. 1.1 使用场景项目中会使用到矩阵的场景: 背景图片,指定位置 ...

Matrix 矩阵

Matrix 矩阵相关推荐

最新文章

热门文章