关于前端:前端-深入理解-transform-函数的计算原理

37次阅读

共计 13743 个字符，预计需要花费 35 分钟才能阅读完成。

在波及到前端图形学的时候，简直防止不了 transform 属性的利用。

而 transform 一共内置了五种不同大类的函数（矩阵变形、平移、缩放、旋转、歪斜，具体细节有九个），开发者常常容易被不同函数的组合变换，搞到昏头昏脑。

当面对须要精准定位的需要时，如果对 transform 的计算原理了解不透彻，就会导致代码简短、复杂度减少，易读性也会迅速降落。

事实上，前端里的 transform 有很多种，比方 CSS 和 SVG 中的 transform 属性就有些许不同。不过万变不离其宗，它们底层的数学原理大体是统一的。

所以为了不便形容，本篇这里以 SVG transform 为主。

一来，能够免去 CSS 中大量对于单位不同的换算，排开很多跟原理无关的细节；
二来，作为矢量格局的 SVG 足够精简，用来形容数学计算形式，矢量化参数领有天生的劣势；

① transform: matrix(a, b, c, d, e, f)

说到图形学，那必然会波及到矩阵运算。

matrix 函数能够说是最根源的存在，如果将前端页面设想成一块画布，matrix 就是这块画布的革新者。只须要设定不同的参数，就能够用 matrix 将图形随便变换。

同时，matrix 函数还是其余四类性能函数的外围，这四类别离是平移、缩放、旋转、歪斜，他们的实现形式都能够用 matrix 等价替换。

matrix 函数的参数是一个 3×3 的方阵矩阵，只不过这个矩阵中只有六个变量，所以函数申明里显式的参数列表长度为 6。

矩阵模式如下（假如为 M）：

$$
M =
\begin{pmatrix}
a & c & e \\
b & d & f \\
0 & 0 & 1 \\
\end{pmatrix}
$$

怎么用呢？
答案是： 矩阵乘法

假如页面上有一个点 point_old 的坐标为  (oldX, oldY)，转换后新的点 point_new 坐标为  (newX, newY)。

在运算过程中，点的矩阵形容形式如下：

$$
point_{old} =
\begin{pmatrix}
oldX \\
oldY \\
1
\end{pmatrix}
\\
point_{new} =
\begin{pmatrix}
newX \\
newY \\
1
\end{pmatrix}
$$

计算形式为：

$$
point_{new} = M * point_{old}
$$

$$
\begin{pmatrix}
newX \\
newY \\
1 \\
\end{pmatrix} =
\begin{pmatrix}
a & c & e \\
b & d & f \\
0 & 0 & 1 \\
\end{pmatrix}
\begin{pmatrix}
oldX \\
oldY \\
1 \\
\end{pmatrix} =
\begin{pmatrix}
a*oldX+c*oldY+e \\
b*oldX+d*oldY+f \\
1 \\
\end{pmatrix}

$$

所以：

$$
point_{new}
\begin{cases}
newX = a*oldX + c*oldY + e \\
newY = b*oldX + d*oldY + f \\
\end{cases}
$$

在这六个参数中，e、f 次要负责偏移量，其余 a、b、c、d 则代表不同的放大倍数。

当初咱们晓得，能够通过对这六个参数的管制，实现不同的成果了。

比方默认状态下，matrix(1, 0, 0, 1, 0, 0) 代表了什么也不动，因为套用上述计算公式，

$$
\begin{pmatrix}
newX \\
newY \\
1 \\
\end{pmatrix} =
\begin{pmatrix}
1 & 0 & 0 \\
0 & 1 & 0 \\
0 & 0 & 1 \\
\end{pmatrix}
\begin{pmatrix}
oldX \\
oldY \\
1 \\
\end{pmatrix} =
\begin{pmatrix}
1*oldX+0*oldY+0 \\
0*oldX+1*oldY+0 \\
1 \\
\end{pmatrix} =
\begin{pmatrix}
oldX \\
oldY \\
1 \\
\end{pmatrix}
$$

后果能够发现，点坐标没有任何变换。

到这里，transform 的外围函数 matrix() 是如何计算的，应该曾经分明了。

那么接下来看看剩下其余所有的函数是如何实现和 matrix 转换的。

<h1>default</h1>
<svg x="0px" y="0px" width="600px" height="300px">
    <line label="axisX" fill="none" stroke="black" stroke-width="10" x1="0" y1="0" x2="600" y2="0" />
    <line label="axisY" fill="none" stroke="black" stroke-width="10" x1="0" y1="0" x2="0" y2="300" />
    <rect x="0" y="0" width="200" height="100" fill="red" opacity="0.9"></rect>
</svg>

② transform: translate(x)

translate 为平移函数，当只有一个参数时，示意图形程度挪动了多少的间隔。
即：

$$
newX = x + oldX
$$

那么很简略的，结构矩阵 matrix(1, 0, 0, 1, x, 0) 即可实现 translate(x) 的成果：

$$
\begin{pmatrix}
newX \\
newY \\
1 \\
\end{pmatrix} =
\begin{pmatrix}
1 & 0 & x \\
0 & 1 & 0 \\
0 & 0 & 1 \\
\end{pmatrix}
\begin{pmatrix}
oldX \\
oldY \\
1 \\
\end{pmatrix} =
\begin{pmatrix}
1*oldX+0*oldY+x \\
0*oldX+1*oldY+0 \\
1 \\
\end{pmatrix} =
\begin{pmatrix}
x + oldX\\
oldY \\
1 \\
\end{pmatrix}
$$

<div>    
    <h1>transform: translate(x)</h1>    
    <svg x="0px" y="0px" width="600px" height="300px">        
        <line label="axisX" fill="none" stroke="black" stroke-width="10" x1="0" y1="0" x2="600" y2="0" />        
        <line label="axisY" fill="none" stroke="black" stroke-width="10" x1="0" y1="0" x2="0" y2="300" />        
        <rect x="0" y="0" width="200" height="100" fill="red" opacity="0.9" transform="translate(100)"></rect>   
    </svg>

    <h1>transform: matrix(1, 0, 0, 1, x, 0)</h1>    
    <svg x="0px" y="0px" width="600px" height="300px">        
        <line label="axisX" fill="none" stroke="black" stroke-width="10" x1="0" y1="0" x2="600" y2="0" />        
        <line label="axisY" fill="none" stroke="black" stroke-width="10" x1="0" y1="0" x2="0" y2="300" />        
        <rect x="0" y="0" width="200" height="100" fill="red" opacity="0.9" transform="matrix(1,0,0,1,100,0)"></rect>    
    </svg>
</div>

③ transform: translate(x, y)

这里能够看做繁多参数的 translate 函数的重载函数，第二个参数 y 值，代表在笛卡尔坐标系下的二维立体中，y 轴方向的平移静止。

即：

$$
\begin{cases}
newX = x + oldX \\
newY = y + oldY
\end{cases}
$$

同理，可结构矩阵 matrix(1, 0, 0, 1, x, y) 实现 translate(x, y) 的成果：

$$
\begin{pmatrix}
newX \\
newY \\
1 \\
\end{pmatrix} =
\begin{pmatrix}
1 & 0 & x \\
0 & 1 & y \\
0 & 0 & 1 \\
\end{pmatrix}
\begin{pmatrix}
oldX \\
oldY \\
1 \\
\end{pmatrix} =
\begin{pmatrix}
1*oldX+0*oldY+x \\
0*oldX+1*oldY+y \\
1 \\
\end{pmatrix} =
\begin{pmatrix}
x + oldX \\
y + oldY \\
1 \\
\end{pmatrix}
$$

<div>    
    <h1>transform: translate(x, y)</h1>    
    <svg x="0px" y="0px" width="600px" height="300px">       
        <line label="axisX" fill="none" stroke="black" stroke-width="10" x1="0" y1="0" x2="600" y2="0" />       
        <line label="axisY" fill="none" stroke="black" stroke-width="10" x1="0" y1="0" x2="0" y2="300" />      
        <rect x="0" y="0" width="200" height="100" fill="red" opacity="0.9" transform="translate(100,50)"></rect>   
    </svg>

    <h1>transform: matrix(1, 0, 0, 1, x, y)</h1>  
    <svg x="0px" y="0px" width="600px" height="300px">   
        <line label="axisX" fill="none" stroke="black" stroke-width="10" x1="0" y1="0" x2="600" y2="0" />      
        <line label="axisY" fill="none" stroke="black" stroke-width="10" x1="0" y1="0" x2="0" y2="300" />     
        <rect x="0" y="0" width="200" height="100" fill="red" opacity="0.9" transform="matrix(1,0,0,1,100,50)"></rect>   
    </svg>
</div>

④ transform: scale(s)

scale 为缩放函数，当只有一个参数时，示意图形在程度和纵向两个轴上，实现等比例的放大放大。

即：

$$
\begin{cases}
newX = s*oldX \\
newY = s*oldY
\end{cases}
$$

因为这里是成比例放大，所以可得变换矩阵 matrix(s, 0, 0, s, 0, 0)：

$$
\begin{pmatrix}
newX \\
newY \\
1 \\
\end{pmatrix}=
\begin{pmatrix}
s & 0 & 0 \\
0 & s & 0 \\
0 & 0 & 1 \\
\end{pmatrix}
\begin{pmatrix}
oldX \\
oldY \\
1 \\
\end{pmatrix}=
\begin{pmatrix}
s*oldX+0*oldY+0 \\
0*oldX+s*oldY+0 \\
1 \\
\end{pmatrix} =
\begin{pmatrix}
s*oldX \\
s*oldY \\
1 \\
\end{pmatrix}
$$

<div>  
    <h1>transform: scale(s)</h1>  
    <svg x="0px" y="0px" width="600px" height="300px"> 
        <line label="axisX" fill="none" stroke="black" stroke-width="10" x1="0" y1="0" x2="600" y2="0" />     
        <line label="axisY" fill="none" stroke="black" stroke-width="10" x1="0" y1="0" x2="0" y2="300" />      
        <rect x="0" y="0" width="200" height="100" fill="red" opacity="0.9" transform="scale(2)"></rect>  
    </svg>

    <h1>transform: matrix(s, 0, 0, s, 0, 0)</h1>   
    <svg x="0px" y="0px" width="600px" height="300px">   
        <line label="axisX" fill="none" stroke="black" stroke-width="10" x1="0" y1="0" x2="600" y2="0" />    
        <line label="axisY" fill="none" stroke="black" stroke-width="10" x1="0" y1="0" x2="0" y2="300" />    
        <rect x="0" y="0" width="200" height="100" fill="red" opacity="0.9" transform="matrix(2,0,0,2,0,0)">   
        </rect>  
    </svg>
</div>

⑤ transform: scale(sx, sy)

这里同样的，也是领有两个参数的重载函数，由此能够离开管制不同轴向的缩放倍率。

即：

$$
\begin{cases}
newX = sx*oldX \\
newY = sy*oldY
\end{cases}
$$

同理可得变换矩阵 matrix(sx, 0, 0, sy, 0, 0)：

$$
\begin{pmatrix}
newX \\
newY \\
1 \\
\end{pmatrix}=
\begin{pmatrix}
sx & 0 & 0 \\
0 & sy & 0 \\
0 & 0 & 1 \\
\end{pmatrix}
\begin{pmatrix}
oldX \\
oldY \\
1 \\
\end{pmatrix} =
\begin{pmatrix}
sx*oldX+0*oldY+0 \\
0*oldX+sy*oldY+0 \\
1 \\
\end{pmatrix} =
\begin{pmatrix}
sx*oldX \\
sy*oldY \\
1 \\
\end{pmatrix}
$$

<div>   
    <h1>transform: scale(sx, sy)</h1>  
    <svg x="0px" y="0px" width="600px" height="300px">    
        <line label="axisX" fill="none" stroke="black" stroke-width="10" x1="0" y1="0" x2="600" y2="0" />     
        <line label="axisY" fill="none" stroke="black" stroke-width="10" x1="0" y1="0" x2="0" y2="300" />      
        <rect x="0" y="0" width="200" height="100" fill="red" opacity="0.9" transform="scale(0.5,2)"></rect>  
    </svg>
    
    <h1>transform: matrix(sx, 0, 0, sy, 0, 0)</h1> 
    <svg x="0px" y="0px" width="600px" height="300px">   
        <line label="axisX" fill="none" stroke="black" stroke-width="10" x1="0" y1="0" x2="600" y2="0" />     
        <line label="axisY" fill="none" stroke="black" stroke-width="10" x1="0" y1="0" x2="0" y2="300" />     
        <rect x="0" y="0" width="200" height="100" fill="red" opacity="0.9" transform="matrix(0.5,0,0,2,0,0)"></rect>   
    </svg>
</div>

⑥ transform: rotate(a)

rotate 为旋转函数，当参数个数为 1 时，示意以以后元素坐标系原点为旋转点，旋转角度为 a 度。

须要提前留神的是，这里的单位为 deg，角度制。

而在接下来换算成 matrix 的过程中，须要用到三角函数。

所以在数值上，须要将角度制，转换成弧度制：

$$
a’=\frac{\pi}{180}*a
$$

此外，因为在二维立体旋转静止下，任意点到旋转圆心的间隔不变。所以为了不便计算，咱们在这里应用极坐标系，推导笛卡尔坐标系下物体静止的形式。

依据极坐标系，咱们用有序数对  (ρ, θ)  示意任意点 P 的坐标，ρ 代表极径，θ** 代表极角（弧度制）。

记为 P(ρ, θ)

那么，任意点旋转 a 角度（a’  弧度）后的坐标即为：P(ρ, θ + a’)**

利用坐标系间的映射关系：

$$
\begin{cases}
X = \rho*cos(\theta) \\
Y = \rho*sin(\theta) \\
\end{cases}
$$

可得：

$$
newP = oldP(\rho,\theta + a’)
$$

$$
\begin{cases}
newX = \rho*cos(\theta+a’) \\
newY = \rho*sin(\theta+a’) \\
\end{cases}
$$

进一步开展可得：

$$
\begin{aligned}
newX &= \rho*cos(\theta+a’) \\
&= \rho*cos(\theta)*cos(a’)-\rho*sin(\theta)*sin(a’) \\
&= oldX*cos(a’)-oldY*sin(a’) \\
&= cos(a’)*oldX + (-1)*sin(a’)*oldY \\
\end{aligned}
$$

$$
\begin{aligned}
newY & = \rho*sin(\theta+a’) \\
& = \rho*sin(\theta)*cos(a’)+\rho*cos(\theta)*sin(a’) \\
& = oldY * cos(a’) + oldX * sin(a’) \\
& = sin(a’) * oldX + cos(a’) * oldY
\end{aligned}
$$

依据上式，能够推出变换矩阵为 matrix(cos(a’), sin(a’), -sin(a’), cos(a’), 0, 0)

$$
\begin{aligned}
\begin{pmatrix}
newX \\
newY \\
1 \\
\end{pmatrix}
& =
\begin{pmatrix}
cos(a’) & -sin(a’) & 0 \\
sin(a’) & cos(a’) & 0 \\
0 & 0 & 1 \\
\end{pmatrix}
\begin{pmatrix}
oldX \\
oldY \\
1 \\
\end{pmatrix} \\
& =
\begin{pmatrix}
cos(a’)*oldX-sin(a’)*oldY+0 \\
sin(a’)*oldX+cos(a’)*oldY+0 \\
1 \\
\end{pmatrix} \\
& =
\begin{pmatrix}
\rho*cos(a’)*cos(\theta)-\rho*sin(a’)*sin(\theta) \\
\rho*sin(a’)*cos(\theta)+\rho*cos(a’)*sin(\theta) \\
1 \\\end{pmatrix} \\
& =
\begin{pmatrix}
\rho*cos(\theta + a’) \\
\rho*sin(\theta + a’) \\
1 \\
\end{pmatrix}

\end{aligned}
$$

<div>  
    <h1>transform: rotate(a)</h1>  
    <svg x="0px" y="0px" width="600px" height="300px">   
        <line label="axisX" fill="none" stroke="black" stroke-width="10" x1="0" y1="0" x2="600" y2="0" />      
        <line label="axisY" fill="none" stroke="black" stroke-width="10" x1="0" y1="0" x2="0" y2="300" />     
        <rect x="0" y="0" width="200" height="100" fill="red" opacity="0.9" transform="rotate(30)"></rect>  
    </svg>

    <h1>transform: matrix(cos(a'), sin(a'), -sin(a'), cos(a'), 0, 0)</h1>  
    <svg x="0px" y="0px" width="600px" height="300px">    
        <line label="axisX" fill="none" stroke="black" stroke-width="10" x1="0" y1="0" x2="600" y2="0" />      
        <line label="axisY" fill="none" stroke="black" stroke-width="10" x1="0" y1="0" x2="0" y2="300" />     
        <rect x="0" y="0" width="200" height="100" fill="red" opacity="0.9" transform="matrix(0.866025,0.5,-0.5,0.866025,0,0)"></rect> 
    </svg>
</div>

⑦ transform: rotate(a, x, y)

当 rotate 函数被指定旋转点后，状况略微简单了一点。

因为函数实质上管制的是画布自身，也能够了解为坐标系自身。

所以，如果想要坐标系上的某一个图形围绕具体一个点旋转，则须要以下三个步骤：

第一、将旋转点从坐标系原点，挪动至指定点；
第二、该指定点默认为坐标系原点，开始旋转；
第三、为了放弃旋转时其余图案的不变，将坐标系原点从指定点挪动回初始点位。

所以，通常指定点的旋转，会采纳  <translate(x, y)><rotate(a)><translate(-x, -y)> 的形式。

translate 中的参数 x、y 即为 rotate(a, x, y) 中的指定点坐标。

那么这种状况，该当如何用 matrix 形容呢？

咱们假如上述三个变换矩阵别离为：

$$
\begin{cases}
translate(x,y)= T_1 =
\begin{pmatrix}
1 & 0 & x \\
0 & 1 & y \\
0 & 0 & 1 \\
\end{pmatrix} \\
rotate(a) = R =
\begin{pmatrix}
cos(a’) & -sin(a’) & 0 \\
sin(a’) & cos(a’) & 0 \\
0 & 0 & 1 \\
\end{pmatrix} \\
translate(-x,-y)=T_2=
\begin{pmatrix}
1 & 0 & -x \\
0 & 1 & -y \\
0 & 0 & 1 \\
\end{pmatrix}
\end{cases}
$$

则，依据函数执行形式可得矩阵计算形式为：

$$
\begin{pmatrix}
newX \\
newY \\
1 \\
\end{pmatrix} =
T_1 * R * T_2 *
\begin{pmatrix}
oldX \\
oldY \\
1 \\
\end{pmatrix}
$$

即：

$$
\begin{aligned}
M & = T_1 * R * T_2 \\
& =
\begin{pmatrix}
1 & 0 & x \\
0 & 1 & y \\
0 & 0 & 1 \\
\end{pmatrix}

\begin{pmatrix}
cos(a’) & -sin(a’) & 0 \\
sin(a’) & cos(a’) & 0 \\
0 & 0 & 1 \\
\end{pmatrix}
\begin{pmatrix}
1 & 0 & -x \\
0 & 1 & -y \\
0 & 0 & 1 \\
\end{pmatrix} \\
&=
\begin{pmatrix}
cos(a’) & -sin(a’) & x \\
sin(a’) & cos(a’) & y \\
0 & 0 & 1 \\
\end{pmatrix}

\begin{pmatrix}
1 & 0 & -x \\
0 & 1 & -y \\
0 & 0 & 1 \\
\end{pmatrix} \\
&=
\begin{pmatrix}
cos(a’) & -sin(a’) & -x*cos(a’)+y*sin(a’)+x \\
sin(a’) & cos(a’) & -x*sin(a’)-y*cos(a’)+y \\
0 & 0 & 1
\end{pmatrix}

\end{aligned}
$$

也就是说，变换矩阵为：
matrix(cos(a’), sin(a’), -sin(a’), cos(a’), -xcos(a’)+ysin(a’)+x, -xsin(a’)-ycos(a’)+y)

$$
\begin{pmatrix}
newX \\
newY \\
1
\end{pmatrix} =
\begin{pmatrix}
cos(a’) & -sin(a’) & -x*cos(a’)+y*sin(a’)+x \\
sin(a’) & cos(a’) & -x*sin(a’)-y*cos(a’)+y \\
0 & 0 & 1
\end{pmatrix}
\begin{pmatrix}
oldX \\
oldY \\
1 \\
\end{pmatrix}
$$

<div>  
    <h1>transform: rotate(a, x, y)</h1> 
    <svg x="0px" y="0px" width="600px" height="300px">    
        <line label="axisX" fill="none" stroke="black" stroke-width="10" x1="0" y1="0" x2="600" y2="0" />      
        <line label="axisY" fill="none" stroke="black" stroke-width="10" x1="0" y1="0" x2="0" y2="300" />    
        <rect x="0" y="0" width="200" height="100" fill="red" opacity="0.9" transform="rotate(30,0,100)"></rect>  
    </svg>

    <h1>transform: matrix(cos(a'), sin(a'), -sin(a'), cos(a'), -x*cos(a')+y*sin(a')+x, -x*sin(a')-y*cos(a')+y)</h1>  
    <svg x="0px" y="0px" width="600px" height="300px">   
        <line label="axisX" fill="none" stroke="black" stroke-width="10" x1="0" y1="0" x2="600" y2="0" />      
        <line label="axisY" fill="none" stroke="black" stroke-width="10" x1="0" y1="0" x2="0" y2="300" />       
        <rect x="0" y="0" width="200" height="100" fill="red" opacity="0.9" transform="matrix(0.866025, 0.5, -0.5, 0.866025, 50.0, 13.39746)"></rect> 
    </svg>
</div>

⑧ transform: skewX(a)

skewX 示意的是 x 轴方向上的歪斜，同样这里将应用三角函数，也同样的，存在弧度制下的：

$$
a’=\frac{\pi}{180}*a
$$

因为歪斜只产生在 x 轴方向，由此可得：

$$
\begin{cases}
newX = \Delta x + oldX = tan(a’)*oldY + oldX\\
newY = oldY
\end{cases}
$$

故，变换函数为 matrix(1, 0, tan(a’), 1, 0, 0)

$$
\begin{aligned}
\begin{pmatrix}
newX \\
newY \\
1 \\
\end{pmatrix}
& =
\begin{pmatrix}
1 & tan(a’) & 0 \\
0 & 1 & 0 \\
0 & 0 & 1 \\
\end{pmatrix}
\begin{pmatrix}
oldX \\
oldY \\
1 \\
\end{pmatrix} \\
& =
\begin{pmatrix}
1*oldX+tan(a’)*oldY+0 \\
0*oldX+1*oldY+0 \\
1 \\
\end{pmatrix}\\
&=
\begin{pmatrix}
tan(a’)*oldY + oldX\\
oldY \\
1 \\
\end{pmatrix}
\end{aligned}
$$

<div>   
    <h1>transform: skewX(a)</h1>   
    <svg x="0px" y="0px" width="600px" height="300px">     
        <line label="axisX" fill="none" stroke="black" stroke-width="10" x1="0" y1="0" x2="600" y2="0" />    
        <line label="axisY" fill="none" stroke="black" stroke-width="10" x1="0" y1="0" x2="0" y2="300" />     
        <rect x="0" y="0" width="200" height="100" fill="red" opacity="0.9" transform="skewX(30)"></rect>   
    </svg>

    <h1>transform: matrix(1, 0, tan(a'), 1, 0, 0)</h1>  
    <svg x="0px" y="0px" width="600px" height="300px">   
        <line label="axisX" fill="none" stroke="black" stroke-width="10" x1="0" y1="0" x2="600" y2="0" />     
        <line label="axisY" fill="none" stroke="black" stroke-width="10" x1="0" y1="0" x2="0" y2="300" />     
        <rect x="0" y="0" width="200" height="100" fill="red" opacity="0.9" transform="matrix(1,0,0.577350,1,0,0)"></rect>  
    </svg>
</div>

⑨ transform: skewY(a)

skewY 示意的是 y 轴方向的歪斜，原理同上：

$$
\begin{cases}
newX = oldX \\
newY = \Delta y + oldY = tan(a’)*oldX + oldY \\
\end{cases}
$$

可得变换函数 matrix(1, tan(a’), 0, 1, 0, 0)

$$
\begin{aligned}
\begin{pmatrix}
newX \\
newY \\
1 \\
\end{pmatrix}
& =
\begin{pmatrix}
1 & 0 & 0 \\
tan(a’) & 1 & 0 \\
0 & 0 & 1 \\
\end{pmatrix}
\begin{pmatrix}
oldX \\
oldY \\
1 \\
\end{pmatrix} \\
& =
\begin{pmatrix}
1*oldX + 0*oldY + 0 \\
tan(a’)*oldX+1*oldY + 0 \\
1 \\
\end{pmatrix}\\
&=
\begin{pmatrix}
oldX\\
tan(a’)*oldX+oldY \\
1 \\
\end{pmatrix}
\end{aligned}
$$

<div>   
    <h1>transform: skewY(a)</h1>   
    <svg x="0px" y="0px" width="600px" height="300px">     
        <line label="axisX" fill="none" stroke="black" stroke-width="10" x1="0" y1="0" x2="600" y2="0" />      
        <line label="axisY" fill="none" stroke="black" stroke-width="10" x1="0" y1="0" x2="0" y2="300" />     
        <rect x="0" y="0" width="200" height="100" fill="red" opacity="0.9" transform="skewY(30)"></rect>  
    </svg>

    <h1>transform: matrix(1, tan(a'), 0, 1, 0, 0)</h1>  
    <svg x="0px" y="0px" width="600px" height="300px">    
        <line label="axisX" fill="none" stroke="black" stroke-width="10" x1="0" y1="0" x2="600" y2="0" />     
        <line label="axisY" fill="none" stroke="black" stroke-width="10" x1="0" y1="0" x2="0" y2="300" />      
        <rect x="0" y="0" width="200" height="100" fill="red" opacity="0.9" transform="matrix(1,0.577350,0,1,0,0)"></rect>  
    </svg>
</div>

综上，就是 transform 全副函数的计算形式了。

或者也能够认为是它的矩阵运算形容。

当然，代码实现的时候可能会为了缩小不必要的矩阵运算，从而做了最优化解决。然而了解它的运算原理，分明底层的计算逻辑，却是非常无益的。

【此文原创，欢送转发，禁止搬运】

正文完
前端
发表至： 前端
2021-11-16
 0
关于前端:CSCI2110-难点讲解
关于前端:一周一个大厂复盘一下Taptap的面经发现不足逐一击破
关于前端:手写简易打包工具webpackdemo
关于前端:React-Hook-函数组件不使用JSX