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

Question

在为我的网站中的某些对象创建一些转换时，我发现 following.If 一个对象被赋予转换属性 skew(20deg,45deg) 将不同于具有 [=13 的其他对象=] 和 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

引自 W3 :

Note that the behavior of skew() is different from multiplying skewX() with skewY(). Implementations must support this function for compatibility with legacy content.

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

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

Answer 2

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

你必须使用：

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

Answer 3

考虑矩阵，当你这样做时

 transform : skew(x, y);

那就是矩阵的叉乘

[ X , Y, Z ]

和

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

where sx = tan(x) and 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

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

Difference between skew() and skewX() skewY()

html

css

css-transforms