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>

更新：偏差语法较短。如何使用skewX()短语法实现与skewY()和skew()相同的效果。

Answer 1

引用W3：

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

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

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

Answer 2

考虑矩阵，当你做

时

 transform : skew(x, y);

然后就像矩阵的交叉乘法

[X，Y，Z]

和

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

其中sx = tan(x)和sy = tan(y)

产生新的coords

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 |

产生新的coords

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

然后新矩阵

[X＆＃39;，Y＆＃39;，Z＆＃39; ]

交叉乘以

| 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 3

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

你必须使用：

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

skew（）和skewX（）skewY（）之间的区别

3 个答案: