CSS matrix函数

本文介绍了CSS3中的matrix函数,它是实现高级和复杂效果的基础。内容涵盖线性代数基础,包括向量和矩阵的概念,以及它们在CSS变换中的应用。详细解释了matrix函数的使用方法,通过实例展示了如何进行坐标变换,并探讨了它与其他CSS变换属性的关系。通过学习,读者可以掌握利用matrix函数进行复合变换和创建复杂动画的能力。
摘要由CSDN通过智能技术生成

matrix()是CSS的transform的一个基础属性,用它可以实现很多高级、复杂的效果,实际上transfromtranslaterotate等都是在matrix的基础上实现的简化版的语法。

线性代数基础

了解和使用必须熟悉线性代数的向量和矩阵知识,当初学习的线性代数的课程早就还给老师了,因为不知道有什么用,如果知道今天会用到,当初一定会好好学习线性代数、高数等课程。

(1)向量

向量用来描述方向和大小,一般使用笛卡尔坐标系来进行向量的描述,比如向量(2, 1)(3, 3)在坐标系中表示如下:

image.png 向量的加法、减法和乘法都是将对应位置的坐标进行运算:

(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列

当相同规模的矩阵之间进行相加时,

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值