html – skew()函数的深度

我真的需要了解偏斜(xdeg)功能是如何工作的所有研究似乎都没有解释x角度如何影响其他点并扭曲它,我需要知道它是否有任何数学公式或者能够期望使用特定学位的结果.

PS.我已经阅读了大量的文档,其中最好的一个是DevDocs

This transformation is a shear mapping (transvection) that distorts
each point within an element by a certain angle in the horizontal and
vertical directions. The coordinates of each point are modified by a
value proportionate to the specified angle and the distance to the
origin; thus, the farther from the origin a point is, the greater will
be the value added it.

但没有进一步解释给定角度将如何影响元素中的那些点.

在SVG书中,它通过说它按特定值推动水平或垂直线来解释偏斜,但我不知道如何将deg值转换为偏移一个

应用于< angle>的 mathematical operation简单地说是tan(< angle>).然后将其插入转换矩阵中.

好吧,这并不是关于倾斜的深度,也不是为什么使用角度而不是数字因素是有意义的.因此,让我们采用以下ASCII示例来显示仅x偏斜.

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),它会给我们一个skewX因子1.
这意味着所有水平线将与转换原点的距离偏移1 *.

在上面的例子中,变换原点是5 * 5图像的中心(x).
因此第一个像素线(a o o o)距原点的距离为负两个像素,它将在左侧转换为2px.
最后一行(e o o o z)距离原点2px,它将在右边翻译2px.
原点上的中间线(c o x o o)不受此变换的影响.

好吧,但这仍然无法解释为什么要用角度而不是因素…

那么角度符号也是有意义的,因为我们也可以解释我们的例子,因为我们使用它们的中心点作为锚点将每列旋转45度.

即使只是我自己的推测,角度也有额外的好处,允许一个无法用数字因子表示的skewN(90deg)状态.