矩阵 matrix浅析

本文详细介绍了CSS3中的矩阵变换原理,包括matrix()函数的使用,如何通过矩阵进行2D平移、缩放变换,并给出了实现镜像效果的矩阵计算方法。通过理解矩阵变换,可以更好地控制元素在网页中的视觉效果。
摘要由CSDN通过智能技术生成

矩阵基础知识:
| a,c,e | | x | | ax + cy + e |
| b,d,f | * 、 | y | = | bx + dy + f |
| 0,0,1 | | 1 | | 0 + 0 + 1 |
第一个矩阵 第二个矩阵 第三个矩阵
两个矩阵可以进行计算的前提是:
Ⅰ:第一个矩阵的列数必须等于第二个矩阵的行数
Ⅱ:第一个矩阵的行数,必须等于得数的矩阵行数

第一个矩阵的参数:前六个(a ,b ,c ,d ,e ,f),是我们可以传入的参数,一般e 和 f ,代表
实际变化的值。 a ,b ,c ,d 是辅助控制结果的参数。

第二个矩阵的参数:前两个(x ,y),代表我们要去进行变换操作的原始坐标。

第三行的参数 【0,0,1】 【1】 【0+0+1】,都不用管,这个是为了便于计算的

计算规则:ax + cy + e1
b
x + d *y + f *1
0 *x + 0 *y + 1 *1

图片变换的底层原理:matrix() 矩阵
矩阵就是transform给咱们选中的计算规则
向矩阵传入参数,通过系统的计算得出需要的结果
trans

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值