The difference between skew () and skewX () skewY ()

Question

When creating some transformations for some objects on my website, I found the following. If an object is specified, the transform property of skew(20deg,45deg) will be different from another object with skewX(20deg) and skewY(45deg) .

Can someone explain to me why this is 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 a short syntax. How can I achieve the same effect that I have with skewX() and skewY() using the short syntax skew() .

Answer 1

thinking about the matrix when you do

  transform : skew(x, y); 

then it’s like cross-matrix multiplication

[X, Y, Z]

and

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

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

leads to the emergence of new coords

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

but when you do

 transform : skewX(x) skewY(y); 

it looks like the first cross-multiplication matrix

[X, Y, Z]

with matrix

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

leads to the emergence of new coords

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

and then the new matrix

[X ', Y', Z ']

times

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

leads to the emergence of new coords as

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

Thus, Y coords vary from Y + X * sy to Y + ( X + Y * sx ) * sy

Answer 2

As indicated on W3 :

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

So just use skew(x,y) if you want to set both, or just use skewX() or skewY() if you want to set a specific skew axis.

In addition, it makes no logical sense to use skewX() and skewY() in the same transform , where you can only use skew() to set both.

Answer 3

The CSS skew property does not have short syntax: http://css-tricks.com/almanac/properties/t/transform/

You should use:

 transform: skewX(value); /* eg skewX(25deg) */ transform: skewY(value);