文章目录

前言
一、2D平面的矩阵由来？
二、平移
- 公式推导
- 推导矩阵
三、缩放
- 公式推导
- 推导矩阵
四、旋转
- 单位圆
- 公式推导
- 推导矩阵
五、斜切
- 斜切的概念
- 公式推导
六、CSS3中matrix() 使用
总结

前言

CSS 已经为我们内置了平移（translate），缩放（scale），旋转（rotate）和斜切（skew）相关的AP了。如果单单从使用来说，这些API已经足够我们使用了。那么按理说，我们已经没有必要去深入研究了，但是只是知其然，而不知其所以然，总是不够的，而且CSS还专门提供了一个matrix的API，那么我们就一起来探究探究把。

一、2D平面的矩阵由来？

我们的2D平面坐标系，仅仅有x，y两个坐标体系，那么不管我们怎么对图片进行变换，归根结底都是对x,y 坐标的变换。
对于二维我们使用的是一个3x3的矩阵，类似这样：
(abcdefghi)\begin{pmatrix} a & b &c \\ d & e &f \\ g & h & i \end{pmatrix} ⎝⎛adgbehcfi⎠⎞
在计算的时候我们以该矩阵乘以我们的位置矩阵，因为二维当中只有x，y两个值。但要进行计算需要3个值，所以我们将第3个值设置为1。就可以的到我们的位置矩阵：
(xy1)\begin{pmatrix} x \\ y \\ 1 \end{pmatrix} ⎝⎛xy1⎠⎞
在该例中，即是：
{newX=a∗x+b∗y+c∗1newY=d∗x+e∗y+f∗1extra=g∗x+h∗y+i∗1①\begin{cases} newX=a*x+b*y+c*1 \\ newY=d*x+e*y+f*1 \\ extra=g*x+h*y+i*1 \end{cases} ① ⎩⎪⎨⎪⎧newX=a∗x+b∗y+c∗1newY=d∗x+e∗y+f∗1extra=g∗x+h∗y+i∗1①
好像单从这里也看不出来什么，下面我们来一步一步的使用矩阵完成CSS API中的平移，缩放，旋转，斜切吧，从中你就应该有所体会了。

二、平移

假设我们需要对2D平面中一个点（x，y）进行平移，平移的量为tx，ty，得到新点的坐标（x₁，y₁）。

公式推导

因为只是简单的移动x，y轴，所以：
{x1=x+txy1=y+ty②\begin{cases} x_1=x+tx \\ y_1=y+ty \end{cases} ② {x1=x+txy1=y+ty②

推导矩阵

由①据②可得各参数取值：
{a=1b=0c=txd=0e=1f=ty\begin{cases} a=1 \\ b=0 \\ c=tx \\ d=0 \\ e=1 \\ f=ty \end{cases} ⎩⎪⎪⎪⎪⎪⎪⎪⎪⎨⎪⎪⎪⎪⎪⎪⎪⎪⎧a=1b=0c=txd=0e=1f=ty
因为只需关注x，y，所以可取得我们的一个平移矩阵：
(10tx01ty001)\begin{pmatrix} 1 & 0 &tx \\ 0 & 1 &ty \\ 0 & 0 & 1 \end{pmatrix} ⎝⎛100010txty1⎠⎞

从这里可以看出，影响我们平移x，y变化的在矩阵中红框中的位置：

三、缩放

假设我们需要对2D平面中坐标原点到一个点A（x，y）所在的线段进行缩放，缩放的比例为z，那么A对应的新点的坐标B（x₁，y₁）。

公式推导

因为只是简单的缩放x，y轴，所以：
{x1=x∗zy1=y∗z③\begin{cases} x_1=x*z \\ y_1=y*z \end{cases} ③ {x1=x∗zy1=y∗z③

推导矩阵

由①据③可得各参数取值：
{a=zb=0c=0d=0e=zf=0\begin{cases} a=z \\ b=0 \\ c=0 \\ d=0 \\ e=z \\ f=0 \end{cases} ⎩⎪⎪⎪⎪⎪⎪⎪⎪⎨⎪⎪⎪⎪⎪⎪⎪⎪⎧a=zb=0c=0d=0e=zf=0
因为只需关注x，y，所以可取得我们的一个缩放矩阵：
(z000z0001)\begin{pmatrix} z & 0 &0 \\ 0 &z&0 \\ 0 & 0 & 1 \end{pmatrix} ⎝⎛z000z0001⎠⎞
从这里可以看出，影响我们旋转变化的在矩阵中红框中的位置：

四、旋转

假设我们需要对2D平面中一个点（x，y）围绕坐标原点进行旋转，旋转的角度为β，得到新点的坐标（x₁，y₁）。

要得到新点的坐标，首先我们需要理解一个概念：

单位圆

在平面直角坐标系中，圆心在原点，半径为1的圆即是我们的单位圆。
由1，当我们已经一个点的与圆心的连线的角度时（假设为α），那么我们可以求得他的坐标为（cos(α),sin(a)）。
由2，现在我们把这个单位圆扩展到以坐标原点为圆心，半径为r的圆上任意一点。假设一点的偏转角度为α，那么得出该坐标为（r * cos(α),r * sin(a)）

公式推导

由单位圆的概念，假定我们要移动的点(x，y）与坐标原点构成的半径为r的圆中，该点的偏转角度为a，那么把该点旋转β度之后，得到的新点（x₁，y₁)的坐标旋转角度应该是（α+β）度，由此我们可得到一个公式：
{x=r∗cos(α)y=r∗sin(α)x1=r∗cos(α+β)=r∗cosαcosβ−r∗sinαsinβy1=r∗sin(α+β)=r∗sin(α)cos(β)+r∗cos(α)sin(β)\begin{cases} x= r * cos(α) \\ y= r * sin(α) \\ x_1= r * cos(α+β) =r*cosαcosβ-r*sinαsinβ\\ y_1= r * sin(α+β) =r * sin(α) cos(β)+r*cos(α)sin(β) \end{cases} ⎩⎪⎪⎪⎨⎪⎪⎪⎧x=r∗cos(α)y=r∗sin(α)x1=r∗cos(α+β)=r∗cosαcosβ−r∗sinαsinβy1=r∗sin(α+β)=r∗sin(α)cos(β)+r∗cos(α)sin(β)
简化得到：
{x1=x∗cosβ−y∗sinβy1=x∗sin(β)+y∗cos(β)④\begin{cases} x_1= x*cosβ-y*sinβ\\ y_1= x*sin(β) +y*cos(β) \end{cases} ④ {x1=x∗cosβ−y∗sinβy1=x∗sin(β)+y∗cos(β)④

推导矩阵

由①据④可得各参数取值：
{a=cos(β)b=−sin(β)c=0d=sin(β)e=cos(β)f=0\begin{cases} a= cos(β)\\ b=-sin(β) \\ c=0\\ d=sin(β) \\ e=cos(β) \\ f=0 \end{cases} ⎩⎪⎪⎪⎪⎪⎪⎪⎪⎨⎪⎪⎪⎪⎪⎪⎪⎪⎧a=cos(β)b=−sin(β)c=0d=sin(β)e=cos(β)f=0
因为只需关注x，y，所以可取得我们的一个旋转矩阵：
(cos(β)−sin(β)0sin(β)cos(β)0001)\begin{pmatrix} cos(β) & -sin(β) &0 \\ sin(β) &cos(β)&0 \\ 0 & 0 & 1 \end{pmatrix} ⎝⎛cos(β)sin(β)0−sin(β)cos(β)0001⎠⎞

从这里可以看出，影响我们旋转变化的在矩阵中红框中的位置：

五、斜切

假设我们需要对2D平面中一个点A（x，y）分别延X轴斜切α角度，延Y轴倾斜β角度，所得新点B（x₁，y₁）。

要得到新点的坐标，首先我们需要理解一个概念：

斜切的概念

X轴斜切: 如果我们要把一个点延X轴方向斜切，即该点的Y轴坐标不变，X轴坐标为该点的X轴坐标加上以坐标原点到该点半径为r的圆中，所得倾斜角度在该圆中的y坐标的值。
Y轴斜切: 如果我们要把一个点延Y轴方向斜切，即该点的X轴坐标不变，Y轴坐标为该点的Y轴坐标加上以坐标原点到该点半径为r的圆中，所得倾斜角度在该圆中的y坐标的值。

公式推导

由四部分的内容根据斜切的概念，得到新点B：
{x1=x+y∗tan(α)y1=y+x∗tan(β)⑤\begin{cases} x_1=x+y*tan(α) \\ y_1= y+x*tan(β) \end{cases} ⑤ {x1=x+y∗tan(α)y1=y+x∗tan(β)⑤
由①据⑤可得各参数取值：
{a=1b=tan(α)c=0d=tan(β)e=1f=0\begin{cases} a= 1\\ b=tan(α) \\ c=0\\ d=tan(β)\\ e=1 \\ f=0 \end{cases} ⎩⎪⎪⎪⎪⎪⎪⎪⎪⎨⎪⎪⎪⎪⎪⎪⎪⎪⎧a=1b=tan(α)c=0d=tan(β)e=1f=0
因为只需关注x，y，所以可取得我们的一个旋转矩阵：
(1tan(α)0tan(β)10001)\begin{pmatrix} 1 & tan(α)&0 \\ tan(β) &1&0 \\ 0 & 0 & 1 \end{pmatrix} ⎝⎛1tan(β)0tan(α)10001⎠⎞
从这里可以看出，影响我们斜切变化的在矩阵中红框中的位置（X轴斜切由tan(α)的值影响，Y轴斜切由tan(β)位置的值影响）：

六、CSS3中matrix() 使用

到这里，你应该对CSS中的矩阵有了一个比较清晰的理解了。那么我们来看下CSS中的matrix。

可以发现，matrix() API 中，仅仅有6个参数，不是有9个吗？怎么只有6个，其实本身是9个，只不过最后一行用了默认值处理，并对我们做了隐藏。

还记得我们最开始的那个矩阵吗？
(abcdefghi)\begin{pmatrix} a & b &c \\ d & e &f \\ g & h & i \end{pmatrix} ⎝⎛adgbehcfi⎠⎞

这里注意一点，我们前文所有的矩阵，对应到Web中的矩阵来说，你可能都感觉有点怪，主要原因就是，数学中的矩阵和Web中的矩阵有点差异。
下面是正常数学中的矩阵：

可见行是横向的，列是纵向的。
而Web中呢：

所以前文的矩阵结果对应到matrix来说，就为matrix(a, d, b, e, c, f)。

可以简单记为：

matrix( scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY() )

总结

到这里我们就把Web中2D矩阵介绍完了，当然大部分情况下，我们可能都不一定会用这个API，用的更多的可能还是translate(),scale(),skewY(),rotate()这些更明确的方法。不过我们要进一步提高自己的技术，还是应该知其然，也知其所以然。

Web二维矩阵matrix详解相关推荐

python随机生成二维列表_对python产生随机的二维数组实例详解
对python产生随机的二维数组实例详解最近找遍了python的各个函数发现无法直接生成随机的二维数组,其中包括random()相关的各种方法,都没有得到想要的结果.最后在一篇博客中受到启发,通过列 ...
php二维数组实例_什么是php二维数组?php二维数组实例详解
什么是php二维数组? 二维数组又称为矩阵,本质上是以数组作为数组元素的数组,一个数组的元素如果是一维数组,那么我们就称这个数组是二维数组. PHP二维数组实例详解我们之前的一篇文章<PHP数 ...
数学建模——一维、二维插值模型详解Python代码
数学建模--一维.二维插值模型详解Python代码一.一维插值 # -*-coding:utf-8 -*- import numpy as np from scipy import interpol ...
转换矩阵 Matrix详解
做UI少不了图形处理,转换矩阵是图形学里的基础,flash中更是常用, Matrix 类表示一个转换矩阵,它确定如何将点从一个坐标空间映射到另一个坐标空间. 先来看一个二维矩阵的几何意义: 2 ...
最全二维码原理详解——（0基础适用）
一.二维码登录的本质二维码登录本质上是一种登录认证方式.既然是登录认证,要做的就是: 1.告诉系统我是谁 2.向系统证明我是谁首先, 告诉系统我是谁:通过扫描二维码,把手机端的账号信息传到PC端 ...
二维码图片详解(转)
本文为翻译文章,英文原文请看这里[link],文中的QRcode中插入图片方法并非简单的利用容错,可以在保证识别正确率的同时加入非常大块的图像,文字等.正文如下---- QRcode是一种用来对字节符 ...
c++二维数组指针详解
记住很重要的一点:数组名=&数组名[0],比如,对于二维数组a[3][4] ,a等同于&a[0],a[0]等同于&a[0][0] int main() { int a[3][4 ...
python二维散点图绘画详解
一.窗口及图位置布局 import matplotlib.pyplot as pltfig=plt.figure() #创建画布ax1=plt.subplot(1,2,1) #指定图画位置 ax2=p ...
python制作二维码_基于Python生成个性二维码过程详解
一.问题描述通过调用MyQR模块来实现生成个人所需二维码. 安装: pip install myqr 二.代码实现 1.普通二维码 from MyQR import myqr # 普通二维码 myq ...

Web二维矩阵matrix详解

文章目录

前言

一、2D平面的矩阵由来？

二、平移

公式推导

推导矩阵

三、缩放

公式推导

推导矩阵

四、旋转

单位圆

公式推导

推导矩阵

五、斜切

斜切的概念

公式推导

六、CSS3中matrix() 使用

总结

Web二维矩阵matrix详解相关推荐

最新文章

热门文章