html - 深入skew()函数

我真的需要了解函数是如何工作的，所有的研究似乎都没有解释x角是如何影响其他点并像那样扭曲它的，我需要知道是否有任何数学公式，或者有一种方法可以预期使用特定程度的结果。
我已经读了很多文档，其中最好的一个是devdocs，上面写着
这个变换是一个剪切映射（矢量变换），它扭曲了
元素中的每个点在水平方向和
垂直方向。每个点的坐标由
与指定角度和距离成比例的值
原点；因此，一个点离原点越远，意志就越强
是它的增值。
但对于给定角度如何影响元素中的这些点，没有进一步的解释。
在svg的书中，它解释了skew，说它按特定值推动水平线或垂直线，但我不知道如何将skew(xdeg)值转换为偏移值

最佳答案

应用于<angle>的mathematical operation只是tan(<angle>)。然后将其插入到变换矩阵中。
好吧，这并没有深入到skew，也没有解释为什么使用角度而不是数字因子是有意义的。所以让我们以下面的ascii示例为例，显示x-only倾斜。

   skewX(0)            skewX(45deg)
_|         |_         _|         |_ => original box markers
  a o o o o         a o o o o
  b o o o o           b o o o o
  c o x o o             c o x o o   <-- this line didn't move
  d o o o o               d o o o o
  e o o o z                 e o o o z
 |         |           |         |

所以如果我们应用tan(45deg)它会给我们一个1的斜交系数。
这意味着所有的水平线将被移动1*到变换原点的距离。
在上面的例子中，变换原点是5*5图像的中心（x）。
因此，第一条像素线（a o o o o）与原点的距离为负两个像素，它将在左侧被平移2倍。
最后一行（e o o o z）位于原点的+2px处，它将被右侧的2px转换。
原点上的中线（c o x o o）不受此转换的影响。
好吧，但这仍然不能解释为什么要用角度而不是一个因素…
角度符号也很有意义，因为我们也可以解释我们的例子，当我们使用每一列的中心点作为锚点旋转45度时。
即使这只是我的推测，角度也有额外的好处，允许一个不能用数字因子表示的skewN(90deg)状态。