CSS中的矩阵变换

作用:

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

本质:

  • 一个矩阵其实就是一个新的坐标系;
  • 原来在笛卡尔坐标系(就是我们常见的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)


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

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
平台声明:文章内容(如有图片或视频亦包括在内)由作者上传并发布,文章内容仅代表作者本人观点,简书系信息发布平台,仅提供信息存储服务。

推荐阅读更多精彩内容

  • 如果不熟悉线性代数的概念,要去学习自然科学,现在看来就和文盲差不多。”,然而“按照现行的国际标准,线性代数是通过公...
    Drafei阅读 1,641评论 0 3
  • 这是很早以前已经看过的,最近无意中又把保存的文章翻出来时,想起很多朋友问过矩阵,虽对矩阵似懂非懂,但却很想弄懂它,...
    dechuan阅读 6,130评论 4 57
  • 理解矩阵一:转载自:http://blog.csdn.net/myan/article/details/64751...
    jiandanjinxin阅读 1,582评论 1 15
  • 最原始出处:http://blog.csdn.net/myan/article/details/647511 (C...
    IIGEOywq阅读 3,942评论 2 62
  • 蹦极之后,我就感觉自己不一样了,极都蹦了,还有什么呀。这种优越感持续存在了好久,这件事,也成为我最近特别骄...
    岛孤阅读 517评论 0 0