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
<style>
div {
width: 70%;
height: 100px;
margin: 50px auto;
}
#top {
background-color: red;
}
#bottom {
background-color: blue;
transform: skewX(24deg);
}
</style>
<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:
https://learn.freecodecamp.org/responsive-web-design/applied-visual-design/use-the-css-transform-property-skewy-to-skew-an-element-along-the-y-axis