transform与Matrix矩阵

sean 发布于2019-08-29 13:46 / 1265人阅读

摘要：每个线性函数使用矩阵描述，如将矩阵乘法用于上述坐标系中的每个点，一个变换就形成了可以在一行中进行多次矩阵乘法进行变换有了这种方法，就可以描述大部分常见的变换并因此可以将他们组合起来，如旋转缩放或拉伸。事实上，所有线性函数的变换都可以被描述。

问题引入 1.

.box1{
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 50px;
    background: black;
    transform: rotate(45deg) translate(300px,300px) ;
}
.box2{
    position: absolute;
    top: 0;
    left: 0;
    width: 100px;
    height: 50px;
    background:black;
    transform: translate(300px,300px) rotate(45deg) ;
}

可以看到通过transform设置的translate和rotate，2个盒子由于先后顺序不同，但是差别却很大。

.test{
  width: 20px;
  height: 140px;
  background-color: salmon;
  position: absolute;
  top: 500px;
  left: 500px;
  transform: rotate(90deg);
  transform: scale(0.5);
}
.test:hover
{
    transform: rotate(45deg);
}

hover后：

可以看到 hover后transform: rotate(45deg)；使得一开始设置的scale恢复了初始值1。
由此可见，transform 是组件化的，其中的2D图像变化并不只是单纯的skew(),scale(),rotate()，translate()等

Matrix matrix()

CSS 函数 matrix() 用六个指定的值来指定一个均匀的二维（2D）变换矩阵。这个矩形中的常量值是不作为参数进行传递的，其他的参数则在主要列的顺序中描述。
举个例子

transform: "translate(tx,ty) rotate(a) skew(b) scale(sx.sy)"

代表将坐标系先 translate 然后 rotate 然后 skew 然后 scale 为新的坐标系。即新坐标系下的点先经过 scale 然后 skew 然后 rotate 然后 translate 后对应于老坐标系下的点。

那Matix是如何运算的呢？

引用文字

在笛卡尔坐标系中，每个欧氏空间里的点都由横坐标和纵坐标这两个值来确定。在CSS（和大部分的计算机图形学）中，原点 (0, 0) 在元素的左上角。每个点都使用数学上的向量符号(x,y)来描述。

每个线性函数使用 2 × 2 矩阵描述，如:

     [a c]
     [b d]

将矩阵乘法用于上述坐标系中的每个点，一个变换就形成了：

可以在一行中进行多次矩阵乘法进行变换：

有了这种方法，就可以描述大部分常见的变换并因此可以将他们组合起来，如：旋转、缩放或拉伸。（事实上，所有线性函数的变换都可以被描述。）组合的变换是从右到左生效的。然而，有一种常见的变换并不是线性的，所以当这种变换要用这种方法来表示时，应该被多带带列出来：位移。位移的向量 (tx, ty) 必须多带带表示，作为两个附加参数。

而上面的例子可以写成

显而易见的
tranmsform的属性是由Matrix矩阵通过参数计算出来

计算方法

translate(tx,ty)
transform: matrix(1, 0, 0, 1, tx, tx)

这两个是等价的，意味着translate的两个参数，被transform放到了第五个和第六个参数中计算。

同样的

scale(sx, sy)
matrix(sx, 0, 0, sy, 0, 0)

这两个也是等价的

如果是旋转rotate(),则要用到三角函数

rotate(θ)
matrix(cosθ,sinθ,-sinθ,cosθ,0,0)

skew()则是使用tan()

skew(θ)
matrix(1,tan(θy),tan(θx),1,0,0)

再通过上面的矩阵相乘公式，可以算得Matrix函数参数值

问题1中，可以表达成

    
   [1,0,300]    [cos45°， -sin(45°) ,0]
   [0,1,300] *  [sin45°,  cos45°,    0]
   [0,0, 1 ]    [   0,     0 ,       1]

相反的矩阵相乘不满足交换律，当translate(300px,300px)和rotate(45deg)两个顺序互换的话，矩阵相乘算得结果参数不同，所以对应的效果也会不同

问题2中

原本transform通过rotate和scale用2个矩阵相乘赋予了Matrix()函数参数
然而transform一旦再次设置rotate()，则会将Matrix()函数参数重置，
所以才会使得transform之前设置的属性荡然无存。

结语

原本CSS3的问题，怎么就不知不觉变成线代问题了呢 - -

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/112697.html

transform与Matrix矩阵

摘要：每个线性函数使用矩阵描述，如将矩阵乘法用于上述坐标系中的每个点，一个变换就形成了可以在一行中进行多次矩阵乘法进行变换有了这种方法，就可以描述大部分常见的变换并因此可以将他们组合起来，如旋转缩放或拉伸。事实上，所有线性函数的变换都可以被描述。问题引入 1. .box1{ position: absolute; top: 0; left: 0; width...

import. 2019-08-01 17:57 评论0 收藏0
聊聊 DisplayObject 的x/y/regX/regY/rotation/scale/ske

摘要：首先要指出的是实例的属性与的参数没有关系。同理可得的与在效果上都是。对实例设置了后，实例的位置会发生变化，这是因为执行了。自此以下结论是正确的的最终也会转换成原生的首先要指出的是：DisplayObject 实例的属性与 graphics.draw*(x, y, ...) 的参数没有关系。在原生的 Canvas 中有的概念，例如：ctx.rect(x, y, width, ...

lanffy 2019-08-21 17:40 评论0 收藏0
HTML5中手势原理分析与数学知识的实践

摘要：中手势原理分析与数学知识的实践引言在这触控屏的时代，人性化的手势操作已经深入了我们生活的每个部分。这篇博文主要是解析了移动端常用手势的原理，及从前端的角度学习过程中所使用的数学知识。 HTML5中手势原理分析与数学知识的实践引言在这触控屏的时代，人性化的手势操作已经深入了我们生活的每个部分。现代应用越来越重视与用户的交互及体验，手势是最直接且最为有效的交互方式，一个好的手势交互，能...

rollback 2019-08-20 18:33 评论0 收藏0
如何优雅的使用css3的矩阵变换matrix(矩阵)

摘要：旋转是可以理解为旋转规律的缩放规律的斜切这里的意思是旋转可以用缩放和斜切一起用来得到两者联系在于这个角度。在写文章的开始首先致谢张鑫旭大神的一篇文章：《理解CSS3 transform中的Matrix(矩阵)》，因为这篇文章给了我很大的启发，虽然文章写得足够清晰明了但是对于我这个不懂矩阵的人还是很难使用上matrix 这个高大上的玩意儿！如果你不懂矩阵也没关系！一、概念 matri...

Ali_ 2019-08-29 13:11 评论0 收藏0