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

Question

While creating some transformations for some objects in my website I found the following.If an object is given the transformation property skew(20deg,45deg) will be different than an other object with skewX(20deg) and skewY(45deg).

Can someone explain me why is this happening?

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

Update: skew has short syntax. How can I achieve the same effect I have with skewX() and skewY() by using skew() short syntax.

Answer 1

thinking about matrix , when you do

 transform : skew(x, y);

then it is like cross multiplication of matrices

[ X , Y, Z ]

and

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

where sx = tan(x) and sy = tan(y)

resulting in new coords

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

but when you do

transform : skewX(x) skewY(y);

it is like first cross multiply matrix

[ X, Y, Z ]

with matrix

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

resulting in new coords

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

and then new matrix

[ X', Y', Z' ]

cross multiplied with

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

resulting in new coords as

X" = X + Y * sx
Y" = Y + ( X + Y * sx ) * sy
Z" = Z

thus the Y coords changes from Y + X * sy to Y + ( X + Y * sx ) * sy