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

Question

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

7

在为我的网站创建一些对象的转换时，我发现以下情况。如果一个对象被赋予变换属性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()相同的效果。

- cssGEEK

3个回答

4

如W3所述：

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

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

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

- Mr. Alien

2

transform 可以接受任意数量和组合的变换函数。即使你引用的注释中说“将 skewX() 乘以 skewY()”，这意味着你确实可以将它们组合成一个单独的声明。如果你尝试指定两个单独的 transform 声明，其中一个将会覆盖另一个。 - BoltClock

所以我认为这是一个实现问题。 - Mr. Alien

0

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

你必须使用：

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

- user4494285

3

你提供的博客文章 1. 不是官方资源，2. 而且是在添加 skew 简短语法之前创建的。 skew 的确有一个简短语法：http://www.w3.org/TR/css-transforms-1/。 - James Donnelly

对不起，我不知道那个。 - user4494285

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- singhiskng · Accepted Answer

思考矩阵，当你进行时

 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。