为了账号安全,请及时绑定邮箱和手机立即绑定

关于tansform:matrix矩阵与缩放的关系中

/ 猿问

关于tansform:matrix矩阵与缩放的关系中

慕容818178 2019-03-28 11:50:43

看了关于transform:matrix矩阵与平移translate、缩放scale、旋转rotate、拉伸skew的关系。

对transform:matrix矩阵与缩放scale的关系有些不明白。


transform: matrix(a,b,c,d,e,f);

https://img2.mukewang.com/5c9c3c17000173f405790173.jpg

【提问】

1、上述的x、y指的是表示转换元素所在坐标变量,这个所在坐标变量是什么意思?

是中心点(0,0)吗?


2、矩阵偏移元素的中心点是什么,(0,0)吗


3、transform: matrix(a,b,c,d,e,f);中的a、d是scale();的参数。例如,按照矩阵的算法就是

假设比例是s,则transform:matrix(s,0,0,s,0,0); 套用矩阵就算,就有:


x' = ax+cy+e = s*x+0*y+0 = s*x;
y' = bx+dy+f = 0*x+s*y+0 = s*y;


但是如果x、y是(0,0)的话,计算出来的x'、y'就是(0,0)了,就是进行了缩比例。

x、y会是一直都是(0,0)为中心点吗?还会有别的值?如果是别的值,是怎么界定了?

查看完整描述

1 回答

已采纳
?
pardon110

建议了解一下线性代数,矩阵相关高等数学概念,运算规则

查看完整回答
反对 回复 2019-03-28
  • 慕容818178
    慕容818178
    不是,我明白矩阵的运算规则。我只是想知道那个x、y指的是哪个的值
  • pardon110
    pardon110
    css3的transform顾名思义是用来描述变换的,它允许旋转,缩放,倾斜或平移给定元素。其实际是通过修改CSS视觉格式化模型的坐标空间来实现的。为了便于理解,你需要知道2D与3D坐标系统表示与变换。 先了解一下2D空间坐标系:笛卡尔坐标用来描述转换坐标模型 在笛卡尔坐标系中,每个 欧氏空间 里的点都由横坐标和纵坐标这两个值来确定。 在CSS(和大部分的计算机图形学)中,原点 (0, 0) 在元素的左上角。每个点都使用数学上的向量符号(x,y)来描述。对坐标系中的每个点进行矩阵乘法就可以得到变换的效果。基于此,可以描述大部分常见的变换并因此可以将他们组合起来,如:旋转、缩放或拉伸。组合的变换是从右到左生效,而对于非线性变换位移,通常是采用位移向量 (tx, ty) 单独表示,作为两个附加参数。 好了进入3D图形坐标,只说matrix函数 CSS 函数 matrix() 用六个指定的值来指定一个均匀的二维(2D)变换矩阵。这个矩形中的常量值是不作为参数进行传递的,其他的参数则在主要列的顺序中描述。 matrix(a, b, c, d, tx, ty) 是 matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1) 的简写。 a b c d 以 <number> 的格式来描述线性变换 tx ty 以 <number> 的格式来描述变换的量 注意:css中的原点是元素左上角顶点(0,0),而不是视窗中心点
  • 慕容818178
    慕容818178
    好的谢谢你哦。小提议:下次回答可以换一下行哦,新手理解有点费劲,看着也有点费劲。
点击展开后面1

添加回答

回复

举报

0/150
提交
取消
意见反馈 帮助中心 APP下载
官方微信