美文网首页
CSS中的矩阵变换

CSS中的矩阵变换

作者: 苦苦修行 | 来源:发表于2018-07-22 15:52 被阅读0次

作用:

将原来的某个点的坐标经过矩阵变换变成新的坐标

本质:

  • 一个矩阵其实就是一个新的坐标系;
  • 原来在笛卡尔坐标系(就是我们常见的x轴与y轴垂直的坐标系)中的点A(假设坐标为(2,1))在新的坐标系(就是用矩阵表示的)标准中,这个坐标(2,1)应该在什么位置,然后再把这个位置对应到笛卡尔坐标系中,坐标是多少

来一张图说明:

WechatIMG1.jpeg

图中信息说明:

  1. xy为笛卡尔坐标系
  2. x'y'是新坐标系(过会我们用矩阵表示)
  3. 基于笛卡尔坐标系(默认),A点坐标为(2,1)
  4. 新坐标系的x'轴的单位向量坐标是(3,1),y'轴的单位向量坐标是(1,2)
    备注:单位向量就是一个单位的长度。比如在x'y'坐标系中,(0,0)到(3,1)就相当于在笛卡尔坐标系中(0,0)到(1,0)

我们要做什么?

A点经过x'y'新坐标系变换后(也就是矩阵变换后)坐标变为什么?

解题:

WechatIMG2.jpeg

解释:

  • 算式左边部分就是要变换的A点坐标
  • 算式右边部分就是用矩阵表示的新坐标系
  • 经过变换后,A点坐标变成了(7,4)
  • 如果我要同时变换A(2,1)B(2,3)两点呢?请看下图


    WechatIMG3.jpeg

    变换后,A点坐标变成了(7,4),B点坐标变成了(9,8)


请注意:文中某些数学表述可能不太准确,仅供参考!

相关文章

网友评论

      本文标题:CSS中的矩阵变换

      本文链接:https://www.haomeiwen.com/subject/vmwlmftx.html