CSS matrix函数
matrix()
是CSS的transform
的一个基础属性,用它可以实现很多高级、复杂的效果,实际上transfrom
的translate
、rotate
等都是在matrix
的基础上实现的简化版的语法。
线性代数基础
了解和使用必须熟悉线性代数的向量和矩阵知识,当初学习的线性代数的课程早就还给老师了,因为不知道有什么用,如果知道今天会用到,当初一定会好好学习线性代数、高数等课程。
(1)向量
向量用来描述方向和大小,一般使用笛卡尔坐标系来进行向量的描述,比如向量(2, 1)
和(3, 3)
在坐标系中表示如下:
向量的加法、减法和乘法都是将对应位置的坐标进行运算:
(8, 2) + (2, 6) = (8 + 2, 2 + 6) = (10, 8)(8, 2) - (2, 6) = (8 - 2, 2 - 6) = (6, -4)(8, 2) * (2, 6) = (8 * 2, 2 * 6) = (16, 12)
(2)矩阵
矩阵是高等代数学中的常见工具,将数字按照长方阵列进行排列,便于进行统计分析等高等数学运算,一个2 X 3
的矩阵就是说这个矩阵有2行3列
当相同规模的矩阵之间进行相加时,是对应的位置两两相加:
矩阵相乘时,会将前一个矩阵每行对应的位置与后一个矩阵每行对应位置分别相乘,然后将结果相加,得到的矩阵的行数等于左边矩阵的行数,列数等于右边矩阵的列数,例如
matrix
方法
CSS3中的transfrom
的matrix()
方法写法如下:
transform: matrix(a,b,c,d,e,f);
一共有六个参数,它对应了一个3*3
的矩阵,书写方向是竖向的:
在进行坐标变换时(2D坐标),假设目标点的坐标为(x, y)
,那么转换公式如下:
得到的新的矩阵的第一行和第二行就是转换后的横纵坐标。
要注意的是transfrom-origin
这个属性是变形的原点,它会影响到点的坐标的计算,我们一帮都会将它设置为0 0
例子
假设有这样一个元素,CSS属性如下:
#transformedObject {position: absolute;left: 0px;top: 0px;width: 200px;height: 80px;
}
此时页面效果如下:
我们对这个元素进行transform: matrix()
的变换:
#transformedObject {position: absolute;left: 0px;top: 0px;width: 200px;height: 80px;transform: matrix(0.9, -0.05, -0.375, 1.375, 220, 20);transform-origin: 0 0;
}
注意我们设置了
transform-origin
进行matrix
运算的原则就和上面提到的一样,以(200, 80)
的运算过程为例:
应用变换后的效果如下:
增加个在线编辑的链接:www.useragentman.com/matrix/#
matrix
与其他属性的关系
matrix
是最基本的变化,它有六个参数,这六个参数给定特殊的值,就可以实现translate
/rotate
等特殊的效果:
以translate
距离,当坐标点为(10px, 10px)
,进行translate(50px 50px)
的变化时,结果的坐标会是(60px, 60px)
如果使用matrix()
进行变化,按照上图,需要给出的参数就是matrix(1, 0, 0, 1, 50, 50)
,进行运算的过程:
1 0 50 10 1 * 10 + 0 * 10 + 50 * 1 60
0 1 50 * 10 = 0 * 10 + 1 * 10 + 50 * 1 = 60
0 0 1 1 0 * 10 + 0 * 10 + 1 * 1 1
结果是相同的。
对matrix
有了了解之后,也就可以使用matrix
同时进行复杂的、复合的变化,从而能够实现更复杂的动画。
CSS matrix函数相关推荐
- oracle矩阵函数,R语言矩阵matrix函数
矩阵是元素布置成二维矩形布局的R对象. 它们包含相同原子类型的元素.尽管我们可以创建只包含字符或只逻辑值的矩阵,但是它们没有多大用处.我们使用的是在数学计算中含有数字元素矩阵. 使用 matrix() ...
- R语言使用matrix函数创建空矩阵、使用nrow参数和ncol参数指定矩阵的行列数
R语言使用matrix函数创建空矩阵.使用nrow参数和ncol参数指定矩阵的行列数 目录 R语言使用matrix函数创建空矩阵.使用nrow参数和ncol参数指定矩阵的行列数 R语言是解决什么问题的 ...
- html中repeat的作用,深入探究CSS repeat()函数知识及用法
今天为大家讲解一下我最近学的一个CSS中repeat()函数的知识,repeat()函数要想理解透彻它,熟练掌握,需要大家花点时间去学习,因为我也查了很多资料,那么,该如何讲才能让大家更容易理解呢?想 ...
- c 语言matrix函数,R语言矩阵matrix函数
矩阵是元素布置成二维矩形布局的R对象. 它们包含相同原子类型的元素.尽管我们可以创建只包含字符或只逻辑值的矩阵,但是它们没有多大用处.我们使用的是在数学计算中含有数字元素矩阵. 使用 matrix() ...
- css calc()函数 动态根据屏幕宽度计算宽度
今天写移动端H5页面,mui按钮在layer mobile 弹窗 html类型的时候,mui按钮宽度设置为100%的时候,mui按钮宽度会超出屏幕,听同事建议,使用 css calc()函数计算得以解 ...
- CSS calc() 函数
CSS calc() 函数 width: calc(100% - 100px); calc()是一个css运算函数,上述表示在继承的父级100%宽度的情况下动态减去了100px 需要注意的是,运算符前 ...
- css cubic-bezier,CSS cubic-bezier()函数
CSS cube-bezier()函数 它是CSS中的内置函数,用于定义三次Bezier曲线.贝塞尔曲线是在2D图形应用程序(如墨水空间,adobe illustrator等)中使用的数学定义的曲线. ...
- python中matrix函数_使用python解线性矩阵方程(numpy中的matrix类)
这学期有一门运筹学,讲的两大块儿:线性优化和非线性优化问题.在非线性优化问题这里涉及到拉格朗日乘子法,经常要算一些非常变态的线性方程,于是我就想用python求解线性方程.查阅资料的过程中找到了一个极 ...
- CSS常用函数补充(var、clac、blur、gradient)
文章目录 一.var 1.1 简介 1.2 使用 1.3 规则 二.calc 2.1 简介 2.2 使用 三.blur 3.1 简介 3.2 使用 3.2.1 filter 3.2.2 backdro ...
最新文章
- ML之回归预测:利用多个算法模型(LassoR、KernelRidgeR、ElasticNetR、GBR、LGBMR、XGBR)对国内某平台上海2020年6月份房价数据集【12+1】进行回归预测
- python棋盘最短路径_【leetcode】64. Minimum Path Sum 棋盘最短路径
- 10 分钟让你明白 MySQL 是如何利用索引的
- 手机游戏上线前的准备
- 最新web打印控件 破解版 下载地址
- 【智能制造】服装企业数字化转型之路
- Word如何使用预设样式、自定样式以及生成自动目录教程
- 10000字拆解:五个美妆新品牌私域背后的数据和逻辑
- 计算机技术学硕国家线,关于工科国家线专硕学硕
- 使用C++代码解密微信加密数据库信息!
- 【java基础练习】打印空心菱形
- 从视频中提取音频Python
- 深度学习(4):NCHW和NHWC
- 如何写新产品开发报告书
- 初生牛犊式工作流系统
- 使用esm数据迁移报错“reason“:“Action/metadata line [1] contains an unknown parameter [_routing]
- 远程办公时意外摔伤,算工伤吗?
- 消费者需求-营销对话探索
- spidermonkey php,javascript SpiderMonkey中的函数序列化如何进行_基础知识
- 华为数通方向--HCIA-Datacom基本知识点简单总结
热门文章
- 软件需求规格说明书的编写指南
- 【VM Ware】虚拟机安装XP系统时,出现546错误的解决办法
- 倾斜摄影测量添加水印
- VRTK4开发VR3:通过手柄进行移动
- SpringCloud(H版以及Alibaba版本)的学习笔记(三)
- C4D团队渲染联机渲染,异地电脑一起渲染,使用RS,OC等渲染器。
- flutter : Failed to find assets path for “Frameworks/App.framework/flutter_assets“
- 深度学习中的卷积与反卷积
- 在网盘上传大文件,一个G的文件有可能几秒中就上传完了。称为极速秒传,请问它是怎么做到的?
- vue设置国际化字体