CODEWITHSUNDEEP
htmlcsscss-transforms
cssGEEK
cssGEEK

Reputation: 1014

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

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.

Upvotes: 7

Views: 2287

Answers (3)

singhiskng
singhiskng

Reputation: 511

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

Upvotes: 5

Mr. Alien
Mr. Alien

Reputation: 157334

As quoted on W3 :

Note that the behavior of skew() is different from multiplying skewX() with skewY(). Implementations must support this function 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.

Also, logically it doesn't make any sense to use skewX() and skewY() on the same transform where you can use skew() alone to set both.

Upvotes: 4

user4494285
user4494285

Reputation:

CSS skew property has no short syntax: http://css-tricks.com/almanac/properties/t/transform/

YOu have to use:

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

Upvotes: 0

Related Questions