要了解如何skew让我们将它与使用角度的另一个转换进行比较。
这是一个旋转的例子，我们将变换原点设为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>
对于这个例子，找到角度及其工作原理在某种程度上是微不足道的：
现在我们以相同的示例为例，将旋转后的元素的高度减小到一个较小的值：
.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>
如果我们比较这两个结果，我们会注意到在这两种情况下我们都有某种旋转，但在倾斜变换时大小不同：
现在更清楚倾斜如何与角度一起工作。变换是一种失真，依赖于角度来定义这种失真。这是一个更好的说明：
蓝色是我们的初始元素，十字是变换原点，黄色是角度。如果我们进行旋转，我们将得到红线，其中宽度保持不变。如果我们进行倾斜，我们将得到橙色线，其中宽度会改变考虑到插图，它将等于W / cos(angle) Where 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>
The same logic is applied but to vertical lines and considering the height. As a side note, skewX(V) is the same as skew(V)ref https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skew.
现在，如果我们在两个方向上应用倾斜：
.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会被考虑。
So for 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)也被使用。
如果我们参考文档 https://developer.mozilla.org/en-US/docs/Web/CSS/transform-function/skew我们有：
该矩阵用于根据初始元素的坐标逐点定义变换后元素的坐标。考虑到这个定义，我们将得到这些方程
Xf = Xi + Yi * tan(ax)
Yf = Xi * tan(ay) + Yi
如果我们考虑skewY只是很清楚的是ax将0 thus tan(0)将0 and 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
如果我们向另一个方向倾斜，我们将应用相同的逻辑。
