skewX vs skewY definitions cloudy and unclear

skewX vs skewY definitions cloudy and unclear


Tell us what’s happening:

I am very confused on the definition of skewX and skewY, it doesn’t make sense to me.

skewX -which skews the selected element along its X (horizontal) axis by a given degree.

What the definition of skew? obviously it is different than a rotate. What is the angle measured relative to? As far as I can tell this command is misnamed. So for example given the x-y coordinate system the skewX degree is the angle of the left and right side of the box as measured from the Y axis so for example a 20deg gives a box with less lean than one with 80deg. However if this is the case why is it called skewX if everything is measured from the Y-axis

skew-y has a similar issue in that is the top and bottom of the box lean as measured in deg from the X-axis.

Does anyone have a way of explaining this condrum?

Thank you

Your code so far

  div { 
    width: 70%;
    height: 100px;
    margin: 50px auto;
  #top {
    background-color: red;
  #bottom {
    background-color: blue;
    transform: skewX(24deg);

<div id="top"></div>
<div id="bottom"></div>

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/68.0.3440.106 Safari/537.36.

Link to the challenge:


Both the name and the (perhaps counter-intuitive conventions) come from linear algebra and methods of “transforming” matrices (which is what graphics are for computers).