参数

2D矩阵的表示 matrix(a,b,c,d,e,f),其中6个参数在矩阵的分布:

 ——     ——
| a c e |
| b d f |
| 0 0 1 |
—— ——

在CSS3中矩阵的原始值是这样的:

transform: matrix(1,0,0,1,0,0);

任意点(x,y,1)经过matrix变化为(ax+cy+e,bx+dy+f,1)

矩阵平移

matrix(1,0,0,1,e,f)

e: 矩阵x坐标平移值,正向平移e
f: 矩阵y坐标平移值,正向平移f

css3中方向,单位为px

	|
|
--------->x
|
↓y

结论:平移只有跟e和f有关系,跟其他a,b,c,d没有关系,e对应x轴的平移,f对应y轴的平移,往正方向平移多少单位就加上多少单位,反之则减去多少个单位。

矩阵缩放

matrix(a,0,0,d,0,0)

a: 矩阵宽度缩放a倍,默认为1不缩放
d: 矩阵高度缩放d倍,默认为1不缩放

结论:缩放只有跟a和d有关系,跟其他数值都无关,a对应x轴缩放,d对应y轴缩放,缩放多少倍就乘以多少

矩阵旋转

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

sinθ和cosθ最大值为1 最小值为-1,当a b c f四个参数符合公式的规律是则为旋转

往顺时针方向旋转45°

a = cos45° = 0.707
b = sin45° = 0.707
c = -sin45° = -0.707
d = con45° = 0.707
matrix(0.707,0.707,-0.707,0.707,0,0);

往顺时针方向旋转90°

a = cos90° = 0
b = sin90° = 1
c = -sin90° = -1
d = con90° = 0
matrix(0,1,-1,0,0,0);

往顺时针方向旋转180°

a = cos180° = -1
b = sin180° = 0
c = -sin180° = 0
d = con180° = -1
matrix(0,1,-1,0,0,0);

结论:得知旋转的度数,根据用sin cos算出相应的值填写

矩阵拉伸

matrix(1,tanθ,tanθ,1,0,0)

b:矩阵以X轴做偏移,偏移后X轴和右边的角度Y°,tanY° = b的值 (左边不变,右边向Y正方向偏远)
c:矩阵以Y轴做偏移,偏移后Y轴和左边的角度X°,tanX° = c的值 (底边不变,顶边向X正方向偏远)

matrix(1,2,0,1,0,0)

matrix(1,0,2,1,0,0)

参考

详细及原理请参考文章:

对CSS3中的transform:Matrix()矩阵的一些理解
https://www.cnblogs.com/Ivy-s/p/6786622.html 理解CSS3 transform中的Matrix(矩阵)
https://www.zhangxinxu.com/wordpress/2012/06/css3-transform-matrix-%E7%9F%A9%E9%98%B5/

矩阵matrix变换的用法(css3属性transform: matrix)的更多相关文章

  1. CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)

    CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)   在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...

  2. CSS3属性transform详解【转载】

    CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)   在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾 ...

  3. CSS3属性transform详解

    在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形处理,本文将对此做详细介绍. 一.旋转 rotate 用法:transform: rotate(45 ...

  4. CSS3属性transform详解之(旋转:rotate,缩放:scale,倾斜:skew,移动:translate)(转载)

    在CSS3中,可以利用transform功能来实现文字或图像的旋转.缩放.倾斜.移动这四种类型的变形处理,本文将对此做详细介绍. 一.旋转 rotate 用法:transform: rotate(45 ...

  5. CSS3 2D Transform

    在 一个二维或三维空间,元素可以被扭曲.移位或旋转.只不过2D变形工作在X轴和Y轴,也就是大家常说的水平轴和垂直轴:而3D变形工作在X轴和Y轴之外, 还有一个Z轴.这些3D变换不仅可以定义元素的长度和 ...

  6. CSS3形变——transform与transform-origin画时钟

    css3属性transform和transform-origin"画"时钟 效果图 前言 八哥:哈喽,大家好!好攻城狮就是我就是你们的小八,欢迎收听你的月亮...哦不,是很高兴与你 ...

  7. css3之transform的应用

    一.利用transform实现图片额外显示 效果图如下 初始状态:

  8. Flash:DisplayObject的transform/matrix的潜规则、小bug

    AS3中,使用DisplayObject的transform/matrix,需要先clone出来,再变换,再赋值回去,这样才会对DisplayObject产生影响,不能直接对原Matrix操作.   ...

  9. CSS3动画属性Transform解读

    无论你是前端还是设计师,相信你在网页二维空间上的操作早已经得心应手,JS处理时间线的动画也早已经 烂熟于胸.从今天开始,我跟大家分享一些“新”的东西,网页的第三个维度,以及纯CSS实现的动画.限于篇幅 ...

随机推荐

  1. Android7_安卓的知识体系梳理

    最近梳理了一下安卓的知识体系,先构建一个整体性的认知,也作为以后的学习路线的依据. [一.从原理角度出发]1.Activity生命周期和启动模式2.View的事件体系与工作原理3.四大组件的工作过程4 ...

  2. 机器学习 - Python 02

    好了,咱们接着上一节的内容,继续学习机器学习中的Python语法部分.这一节算是Python语法的最后一节了.也就是说如果真的看懂了这两节的内容,理论上说就机器学习的领域或者方向,语言已经不是问题了. ...

  3. git之github推送篇

    1.创建项目  2.生成ssh密钥并设置到github 在文件夹里面右键打开git命令行,输入下面命令,然后一直回车. ssh-keygen -t rsa 生成位置在当前用户的.ssh文件夹里,带pu ...

  4. Curator实现zookeeper分布式锁的基本原理

    一.写在前面 之前写过一篇文章(<拜托,面试请不要再问我Redis分布式锁的实现原理>),给大家说了一下Redisson这个开源框架是如何实现Redis分布式锁原理的,这篇文章再给大家聊一 ...

  5. [**P2766** 最长不下降子序列问题](https://www.luogu.org/problemnew/show/P2766)

    P2766 最长不下降子序列问题 考虑我们是如何\(dp\)这个\(LIS\)的. 我们是倒着推,设置\(dp(i)\)代表以\(i\)为起点的\(LIS\)是多少.转移太显然了 \[ dp(i)=m ...

  6. 牛客练习赛$48E$ 小$w$的矩阵前$k$大元素 堆

    正解:堆 解题报告: 传送门$QwQ$ 考虑把$b$从大往小排序,然后把$a_1+b_1,a_2+b_1,...,a_n+b_1$丢到堆里,顺便记录下$b$的下标 然后每次拿出一个最大值,设为$mx= ...

  7. $Noip2015/Luogu2661$ 信息传递 并查集

    Luogu $Description$ 给定一个有向图,每个点只有一条出边.求图里的最小环. $Sol$ 使得这个题不难的地方就在于每个点只有一条出边叭. 一边连边一边更新答案.首先当然是初始$f[i ...

  8. $BZOJ1799\ Luogu4127$ 月之谜 数位统计$DP$

    AcWing Description Sol 看了很久也没有完全理解直接$DP$的做法,然后发现了记搜的做法,觉得好棒! 这里是超棒的数位$DP$的记搜做法总结   看完仿佛就觉得自己入门了,但是就像 ...

  9. 【汇编】1.汇编环境的搭建:DOSBox的安装

    前言 DOSBox是一款在windows系统运行DOS程序的环境模拟器.可以解决在64位机中汇编程序编译调试等问题. 本文以 DOSBox 0.74 为例,汇编编译程序采用MASM6. 第一步下载相关 ...

  10. 不只是安装,Kolla 让 OpenStack 运维变简单

    使用 kolla 部署的 OpenStack 环境和传统直接安装的环境相比较,因为使用了全容器化部署,基本操作上有很大不同.对于初学者,操作变得更清晰和更简单了,但是如果你已经有了一定的经验,可能反而 ...