CSS3 matrix矩阵

参数

matrix()有六个参数：matrix(a,b,c,d,e,f)；

这六个参数组成的矩阵与原坐标矩阵相乘计算坐标；

计算

获取当前元素的所有像素点坐标并计算

x' = ax+cy+e

y' = bx+dy+f

简单例子

　偏移

　坐标公式应该为：x' = x + 偏移量； y‘ = y + 偏移量

　套用上面的公式那么应该：a = 1； b = 0；c = 0；d = 1； e = x偏移量；f = y偏移量

　 matrix(1, 0, 0, 1, x偏移量, y偏移量)

缩放

　 x' = x*x缩放倍数； y’ = y*y缩放倍数

　 a = x缩放倍数； b = 0； c = 0； d = y缩放倍数； e = 0； f = 0

　 matrix(x缩放倍数, 0, 0, y缩放倍数, 0, 0);

　如：缩小一半， matirx(0.5,0,0,0.5,0,0);

　倾斜

　 x' = a*x + c*y ； y' = b*x +d*y

　 a = cosθ； b = sinθ； c = sinθ； d = cosθ； e = 0； f = 0；

　 matrix(cosθ, sinθ, sinθ, cosθ, 0, 0);

　如：要水平倾斜30度，只需计算出cos30°和sin30°的值，作为参数a和c的值 matrix(0.866,0,0.5,1,0,0)；

　垂直倾斜同理；

　旋转

　只需：水平倾斜角度 = -垂直倾斜角度

　如：要顺时针旋转30度， matrix(0.866,0.5,-0.5,0.866,0,0)；

上面的都可以用CSS3 transform提供的translate() rotate() scale() 方法实现，但有些效果不能实现。（如：镜像）

　　水平镜像：(y坐标不变，x坐标变负)

　　所以：a=-1; b=0; c=0; d=1; e=0; f=0;简化得：
　　x' = -x;
　　y' = y

　　垂直镜像：(x坐标不变，y坐标变负)

　　所以：a=1; b=0; c=0; d=-1; e=0; f=0;简化得：
　　x' = x;
　　y' = -y

　　水平镜像+倒立：(y坐标变负，x坐标变负)

　　所以：a=-1; b=0; c=0; d=-1; e=0; f=0;简化得：
　　x' = -x;
　　y' = -y

　　90度旋转+镜像：(x'=y，y'=x)

　　所以：a=0; b=1; c=1; d=0; e=0; f=0;简化得：
　　x' = y;
　　y' = x

　　-90度旋转+镜像：(x'=-y，y'=-x)

　　所以：a=0; b=-1; c=-1; d=-0; e=0; f=0;简化得：
　　x' = -y;
　　y' = -x

　　一些简单的参数实现的效果

　　由于计算比较麻烦，对于tranform的其他方法能实现的，还是用那些方法。

CSS3 matrix矩阵相关推荐

理解CSS3 transform中的Matrix(矩阵)
一.哥,我被你吓住了打架的时候会被块头大的吓住,学习的时候会被奇怪名字吓住(如"拉普拉斯不等式").这与情感化设计本质一致:界面设计好会让人觉得这个软件好用! 所以,当看到上面& ...
【CSS3】理解CSS3 transform中的Matrix(矩阵)
理解CSS3 transform中的Matrix(矩阵) by zhangxinxu from http://www.zhangxinxu.com 本文地址:http://www.zhangxinxu ...
Android 自定义View ——Matrix (矩阵)
Matrix的作用: Matrix类包含一个3x3矩阵,用于转换坐标 Matrix (矩阵) 的原理很遗憾自己目前也是含糊的很,这里就不说了,记录自己在项目使用的方法, 这里就简单的记录下Matrix ...
R语言使用upper.tri函数、lower.tri函数、diag函数改变matrix矩阵上三角形、下三角形、对角线的数值
R语言使用upper.tri函数.lower.tri函数.diag函数改变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) 方法:实现两个矩阵的乘法,所 ...
汉澳matrix矩阵电脑
我在梦中看到超级计算机是超算电脑,采用大量阵列cpu和内存,完成并发计算.有个手机厂家提供服务因为使用普通机器,导致经常宕机,其实铁道部火车网络售票就是. 因为不能采用云服务,上万台计算机并行处理,所 ...
LearnGL - 06.1 - Matrix - 矩阵02 - 向量空间、向量空间的维度、为何矩阵乘法要有 [M x N] * [N * P] 的 N 要相等的限制
文章目录矩阵乘法为何有维度限制? 什么是向量空间? 什么是向量空间的维度? 理解为何有这个限制 LearnGL - 学习笔记目录本人才疏学浅,如有什么错误,望不吝指出. 上一篇:LearnGL - ...

CSS3 matrix矩阵

参数

计算

简单例子

偏移

缩放

倾斜

旋转

CSS3 matrix矩阵相关推荐

最新文章

热门文章