CSS3 matrix矩阵

港控/mmm° 2021-10-18 06:26 407阅读 0赞

## 参数 ##

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

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

## 计算 ##

![aHR0cHM6Ly9pbWFnZXMyMDE3LmNuYmxvZ3MuY29tL2Jsb2cvMTEzMDk0Ni8yMDE3MDkvMTEzMDk0Ni0yMDE3MDkxNzE5MzEyNDA2My0xODQyOTM1MjMyLmdpZg][]

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

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的其他方法能实现的，还是用那些方法。

[aHR0cHM6Ly9pbWFnZXMyMDE3LmNuYmxvZ3MuY29tL2Jsb2cvMTEzMDk0Ni8yMDE3MDkvMTEzMDk0Ni0yMDE3MDkxNzE5MzEyNDA2My0xODQyOTM1MjMyLmdpZg]: /images/20211018/acce181a1b8a4eafbac3e600a430fc52.png

发表评论取消回复

表情：

评论列表（有 0 条评论，407人围观）

还没有评论，来说两句吧...

相关阅读

相关理解CSS3 transform中的Matrix(矩阵)

一、哥，我被你吓住了打架的时候会被块头大的吓住，学习的时候会被奇怪名字吓住（如“拉普拉斯不等式”）。这与情感化设计本质一致：界面设计好会让人觉得这个软件好用！所以，

深碍√TFBOYSˉ_/ 2023年01月07日 07:20/ 0 赞/ 125 阅读

相关 Spiral Matrix（C++螺旋矩阵）

(1) 设置访问数组+转向 class Solution { public: vector<vector<int>> d={

水深无声/ 2022年10月11日 00:51/ 0 赞/ 207 阅读

相关 [Leetcode][python]Spiral Matrix/Spiral Matrix II/螺旋矩阵/螺旋矩阵 II

Spiral Matrix 题目大意将一个矩阵中的内容螺旋输出。注意点：矩阵不一定是正方形例子：输入: matrix = \[ \[1, 2,

旧城等待，/ 2022年06月07日 03:55/ 0 赞/ 213 阅读

相关黑塞矩阵（Hessian Matrix）

转载自http://blog.csdn.net/caimouse/article/details/60465975，仅用作个人学习。如需删除，请见谅并联系本人。为了不分原创浏览

╰+攻爆jí腚メ/ 2022年06月04日 09:42/ 0 赞/ 326 阅读

相关 confusion matrix 混淆矩阵绘制

原理横轴一般是predict label，纵轴是ground truth label，对角线是预测正确的概率或个数绘制 sklearn 中confusion\

淡淡的烟草味﹌/ 2022年05月12日 02:50/ 0 赞/ 315 阅读

相关 CSS3的transform和matrix

1、基于矩阵的应用矩阵（matrix）本是transform属性下的一个方法，而transform属性的其他方法如translate（平移）、scale（缩放）、ske

一时失言乱红尘/ 2022年05月10日 08:04/ 0 赞/ 232 阅读

相关 Confusion Matrix（混淆矩阵）

![在这里插入图片描述][watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ub

偏执的太偏执、/ 2022年03月01日 18:26/ 0 赞/ 301 阅读

相关 CSS3矩阵理解———transform: matrix()改变元素运动的本质

在CSS3转换这个大板块里面，有很多的细小的分类。例如这类rotate（旋转）,translate（移动）,scale（缩小）,skew（扭曲），其实这类的函数都是为了供各位的

╰+攻爆jí腚メ/ 2022年03月01日 05:04/ 0 赞/ 356 阅读

相关 CSS3 matrix矩阵

参数 matrix()有六个参数：matrix(a,b,c,d,e,f)；这六个参数组成的矩阵与原坐标矩阵相乘计算坐标；计算 ![aHR0cHM6L

港控/mmm°/ 2021年10月18日 06:26/ 0 赞/ 408 阅读

相关拉普拉斯矩阵（Laplacian Matrix）

文章目录 1. 无向加权图 G G G 2. 邻接矩阵 W W W 3. 度矩阵 D D D 4. 拉普拉斯矩阵 L L L 参考

系统管理员/ 2021年09月25日 01:38/ 0 赞/ 2045 阅读