html - skew()和skewX()skewY()之间的区别

在为我的网站中的某些对象创建一些转换时，我发现了以下内容：如果给定了某个对象，则“转换”属性将不同于具有“转换”和“转换”属性的其他对象。
有人能解释一下为什么会这样吗？

.skew {
  height:10em;
  width:10em;
  background:red;
  margin:auto;
}

#first {
  transform:skew(20deg,45deg);
}

#second {
  transform:skewX(20deg) skewY(45deg);
}

<div class="skew" id="first"> skew(20deg,45deg) </div> <hr>
<div class="skew" id="second"> skewX(20deg) skewY(45deg) </div>

更新：skew有短语法。如何通过使用skew(20deg,45deg)短语法来达到与skewX(20deg)和skewY(45deg)相同的效果。

最佳答案

想想矩阵，当你这样做的时候

 transform : skew(x, y);

就像矩阵的交叉乘法
[x，y，z]
和

| 1,  sx,  0 |
| sy,  1,  0 |
| 0,   0,  1 |

其中sx = tan(x)和sy = tan(y)
产生新的坐标

X' = X + Y * sx
Y' = Y + X * sy
Z' = Z

但当你这样做的时候

transform : skewX(x) skewY(y);

就像第一个交叉乘法矩阵
[x，y，z]
带矩阵

| 1, sx, 0 |
| 0,  1, 0 |
| 0,  0, 1 |

产生新的坐标

X' = X + Y * sx
Y' = Y
Z' = Z

然后是新的矩阵
[X'，Y'，Z']
交叉乘

| 1,  0, 0 |
| sy, 1, 0 |
| 0,  0, 1 |

产生新的坐标

X" = X + Y * sx
Y" = Y + ( X + Y * sx ) * sy
Z" = Z

因此，Y坐标从Y + X * sy变为Y + ( X + Y * sx ) * sy

关于html - skew()和skewX()skewY()之间的区别，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/28672451/