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

Question

虽然创造了一些变革在我的网站的一些对象,我发现一个对象被赋予变换特性,following.If 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语法短.我如何能实现我有同样的效果skewX(),并skewY()采用skew()短语法.

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