zoukankan      html  css  js  c++  java
  • 矩阵变化和坐标

    原文地址:http://www.cnblogs.com/winter-cn/archive/2010/12/29/1919266.html
    http://www.useragentman.com/blog/2011/01/07/css3-matrix-transform-for-the-mathematically-challenged/

    =============================================

    在开始之前,首先来复习下一个简单的线性代数知识:矩阵与向量乘法。太复的用不到,只需要3维向量与3x3矩阵的乘积:

    image001

    接下来我们来说说transform跟矩阵乘法的关系,我们的任何一个html元素渲染完成后可以得到一张位图,把这张位图上所有的点都做一次矩阵运算,将得到一张的新的位图,这就是transform的基本含义。

    首先来看最简单的transform,translate。我们都知道tansform:translate(tx,ty);的基本含义是将一个元素的显示位置平移tx,ty。在矩阵变换中,translate体现为下面的矩阵运算:

    image002

    tansform:scale(sx,sy);将一个元素拉伸或者压缩指定的倍数,它对应的矩阵变换是:

    image003

    transform:rotate(a)将一个元素旋转角度a,它对应的矩阵变换是:

    image004

    transform:skew(ax,ay)将一个元素研x向和y向倾斜角度ax和ay,它对应的矩阵变换是:

    image005

    transform:matrix(a,b,c,d,e,f)则是完整的矩阵变换,把这张位图上所有的点都做一次矩阵乘法,得到的新位图

    image006


  • 相关阅读:
    进程 之二
    进程
    VIM
    Linux
    编码
    Maven
    Java
    Java
    Java
    其他
  • 原文地址:https://www.cnblogs.com/cly84920/p/4426503.html
Copyright © 2011-2022 走看看