html - skew() 函数深入

Question

我真的需要了解如何skew(xdeg)函数起作用所有研究似乎都没有解释 x Angular 如何影响其他点并像这样扭曲它，我需要知道它是否有任何数学公式或一种能够预期使用特定度数的结果的方法。

附:我已经阅读了大量文档，其中最好的一个是 开发文档 其中说

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.

但没有进一步解释给定 Angular 将如何影响元素中的这些点。

在 SVG 书中，它通过说它按特定值插入水平线或垂直线来解释偏斜，但我不明白 deg值被转换为偏移一

Answer 1

了解如何skew让我们将它与另一个使用 Angular 变换进行比较。

这是一个旋转示例，我们将变换原点设为 top left从那里我们旋转 45deg :

.box {
  margin:50px;
  width:200px;
  height:200px;
  background:blue;
}
.box > div {
  height:100%;
  width:100%;
  background:rgba(255,0,0,0.5);
  transform-origin:top left;
  transform:rotate(45deg);
}

<div class="box">
  <div></div>
</div>

对于这个例子，找到 Angular 及其工作原理是很简单的:



现在让我们以相同的示例将旋转元素的高度减小到一个较小的值:

.box {
  margin:50px;
  width:200px;
  height:200px;
  background:blue;
}
.box > div {
  height:3px;
  width:100%;
  background:red;
  transform-origin:top left;
  transform:rotate(45deg);
}

<div class="box">
  <div></div>
</div>

这就像我们有一条旋转的线。现在让我们用倾斜替换旋转:

.box {
  margin:50px;
  width:200px;
  height:200px;
  background:blue;
}
.box > div {
  height:3px;
  width:100%;
  background:red;
  transform-origin:top left;
  transform:skewY(45deg);
}

<div class="box">
  <div></div>
</div>

如果我们比较这两个结果，我们会注意到我们在这两种情况下都有某种旋转，但在倾斜变换方面有不同的大小:



现在更清楚倾斜如何与 Angular 一起工作。变换是一种依靠 Angular 来定义这种失真的失真。这是一个更好的说明:



蓝色是我们的初始元素，十字是变换原点，黄色是 Angular 。如果我们进行旋转，我们将获得红线，其中 宽度保持不变 .如果我们进行偏斜，我们将获得橙色线，其中 宽度会改变 考虑到插图，它将等于 W / cos(angle)哪里W是我们的初始宽度(在我们之前的例子中 cos(45deg) = 1 / sqrt(2) 所以我们会有 W * sqrt(2) )。

现在我们的初始正方形呢，它在倾斜时会如何表现？

.box {
  margin:50px;
  width:200px;
  height:200px;
  background:blue;
}
.box > div {
  height:100%;
  width:100%;
  background:red;
  transform-origin:top left;
  transform:skewY(45deg);
}

<div class="box">
  <div></div>
</div>

它的行为与我们之前描述的完全相同 逐行 .如果我们在另一个方向应用偏斜，我们也会得到相同的结果:

.box {
  margin:50px;
  width:200px;
  height:200px;
  background:blue;
}
.box > div {
  height:100%;
  width:100%;
  background:red;
  transform-origin:top left;
  transform:skewX(45deg);
}

<div class="box">
  <div></div>
</div>

相同的逻辑适用于垂直线并考虑高度。作为旁注，skewX(V)与 skew(V) 相同ref .

现在，如果我们在两个方向上应用偏斜:

.box {
  margin:50px;
  width:200px;
  height:200px;
  background:blue;
}
.box > div {
  height:100%;
  width:100%;
  background:red;
  transform-origin:top left;
  transform:skew(45deg,10deg);
}

<div class="box">
  <div></div>
</div>

就像我们第一次申请 skewX要扭曲垂直线，然后我们应用 skewY到新形状以扭曲水平线(或相反)。这是一个动画来说明 skew(45deg,45deg) 的神奇结果:

.box {
  margin:50px;
  width:200px;
  height:200px;
  background:blue;
}
.box > div {
  height:100%;
  width:100%;
  background:red;
  transform-origin:top left;
  transform:skew(45deg,10deg);
  animation:change 5s infinite alternate linear;
}
@keyframes change {
  from {
    transform:skew(0deg,0deg);
  }
  50% {
    transform:skew(45deg,0deg);
  }
  to {
    transform:skew(45deg,45deg);
  }
}

<div class="box">
  <div></div>
</div>

那么起源呢？转换不会改变任何东西，只有引用会改变。换句话说，固定点将移动:

.box {
  margin:50px;
  width:200px;
  height:200px;
  background:blue;
}
.box > div {
  height:100%;
  width:100%;
  background:red;
  transform-origin:center;
  transform:skew(45deg,10deg);
  animation:change 5s infinite alternate linear;
}
@keyframes change {
  from {
    transform:skew(0deg,0deg);
  }
  50% {
    transform:skew(45deg,0deg);
  }
  to {
    transform:skew(45deg,45deg);
  }
}

<div class="box">
  <div></div>
</div>

我们可能还会注意到，如果我们在一个方向上倾斜，只有 transform-origin 的一个参数。将被考虑。

所以对于 skewX , transform-origin: X Y无论 X 的值如何，都将相同是。这以某种方式将逐行转换解释为当我们在线时我们有一个维度。

.box {
  margin:50px;
  width:200px;
  height:200px;
  background:blue;
}
.box > div {
  height:100%;
  width:100%;
  background:red;
  transform:skewX(45deg);
  animation:change 5s infinite alternate linear;
}
@keyframes change {
  from {
    transform-origin:0 0;
  }
  50% {
    transform-origin:100% 0;/*nothing will happen between 0 and 50%*/
  }
  to {
    transform-origin:100% 100%;
  }
}

<div class="box">
  <div></div>
</div>

更深入

现在让我们考虑矩阵计算以了解它是如何使用的以及如何tan(angle)也被使用。

如果我们引用the documentation我们有:



该矩阵用于根据初始元素的坐标逐点定义变换元素的坐标。考虑到这个定义，我们将有这些方程

Xf = Xi + Yi * tan(ax)
Yf = Xi * tan(ay) + Yi

如果我们考虑 skewY只有很明显ax将是 0因此tan(0)将是 0和 X不会改变我们的第一个例子的情况，我们只在 Y 轴上有失真(如果我们只应用 skewY，则相同的逻辑)。

现在，为什么我们有 Yf = Xi * tan(ay) + Yi ?

让我们重新看一下之前的插图:



绿点是Xi,Yi定义的初始点红点是由Xf,Yf定义的转换后的点.微不足道的是Xf=Xi两点之间的距离将为 Yf-Yi .

考虑到插图，我们可以清楚地说 tan(ay) = (Yf-Yi)/Xi = (Yf-Yi)/Xf因此我们将有:

Xf = Xi 
Yf = Xi * tan(ay) + Yi

如果我们向另一个方向倾斜，我们将应用相同的逻辑。