C3:matrix()方法的简单使用

本文介绍了CSS3中的matrix()方法,用于通过一个包含六值的2D变换矩阵进行元素的变形。内容包括矩阵乘法规则的说明,以及如何使用matrix()实现垂直镜像、水平镜像和轴向位移的实例。
摘要由CSDN通过智能技术生成

matrix(): 以一个含六值的(a,b,c,d,e,f)变换矩阵的形式指定一个2D变换,相当于直接应用一个[a,b,c,d,e,f]变换矩阵

矩阵的乘法:
在这里插入图片描述

注意:
1、当矩阵A的列数(column)等于矩阵B的行数(row)时,A与B可以相乘。
2、矩阵C的行数等于矩阵A的行数,C的列数等于B的列数。
3、乘积C的第m行第n列的元素等于矩阵A的第m行的元素与矩阵B的第n列对应元素乘积之和。

在CSS3中我们矩阵的原始值是这样的
transforms:matrix(1,0,0,1,0,0);

        |1 0 e|   |x|    |e + X|  
        |0 1 f| * |y|  = |f + Y|
        |0 0 1|   |1|    |1|
        matrix(1, 0, 0, 1, e, f); ==> translate  e表示在x轴上的移动,f表示在y轴上的移动

        |a 0 0|   |x|    |ax|  
        |0 d 0| * |y|  = |dy|
        |0 0 1|   |1|    |1|

        matrix(a, 0, 0, d, 0, 0); ==> scale()

        matrix(cosθ, sinθ, -sinθ, coseθ, 0, 0); ==> rotate() 
        matrix(1, tin(θy), tan(θx), 1, 0,
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值