skew() 和 skewX() 的区别 skewY()

Question

在为我的网站中的某些对象创建一些转换时，我发现以下内容。如果给定对象，则转换属性 skew(20deg,45deg) 将不同于具有 skewX(20deg) 和 skewY(45deg) 的其他对象。

谁能解释一下为什么会这样？

.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() 短语法达到与 skewX() 和 skewY() 相同的效果。

Answer 1

考虑矩阵，当你这样做时

 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

Answer 2

正如W3 所引用的：

请注意，skew() 的行为不同于乘以 skewX() 与skewY()。实现必须支持此功能 与旧内容的兼容性。

因此，如果您想同时设置两者，请使用skew(x,y)，或者如果您想设置特定的倾斜轴，请使用skewX() 或skewY()。

此外，从逻辑上讲，在同一 transform 上使用 skewX() 和 skewY() 没有任何意义，您可以单独使用 skew() 来设置两者。

Answer 3

CSS skew 属性没有简短的语法： http://css-tricks.com/almanac/properties/t/transform/

你必须使用：

transform: skewX(value);  /* e.g. skewX(25deg) */
transform: skewY(value);