html5中skew,html – skew()函数的深度

应用于< 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

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)状态.