Understanding CSS Transform Skew

Can someone help with explaining a logical way of understanding/predicting what the outcome of a skew would be without resorting to a trial and error approach.

For example, the transform rotateX/Y rule is fairly straight forward and one can easily predict what the outcome would be when specifying the value of degrees an element should be rotated by.

However, I haven’t been able to work out a logical way of predicting the outcome of specifying a skew value in any axis (i.e. skewX/Y). Is there a way to understand/predict what the outcome of a skew value would be?

It is not the easiet thing to explain with words, or to visualize
Do you know what cartesian axes are?
You can see it as if using skew the X or Y axe is inclined of the given angle.

If you want to really dig into it, you’ll want to check out an introductory course on linear algebra. For practical purposes though, it’s just a matter of dusting off that high school geometry and remembering angles (or looking at a protractor).


Thanks a lot, the images give enough information to at least use the property predictably. I had issues knowing which way elements would tilt but this solves it. Thanks

I’m glad I could help. Happy coding!

This topic was automatically closed 180 days after the last reply. New replies are no longer allowed.