FCC---Use the CSS Transform Property skewX to Skew an Element Along the X-Axis

The next function of the transform property is skewX(), which skews the selected element along its X (horizontal) axis by a given degree.

The following code skews the paragraph element by -32 degrees along the X-axis.

p {
  transform: skewX(-32deg);
}

练习题目：

Skew the element with the id of bottom by 24 degrees along the X-axis by using the transform property.

练习代码：

 <style>
   div {
     width: %;
     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>

效果：

• 蓝色的和红色一样的
• 通过skewX，让蓝色的上下边不动，左右在水平方向（延X轴）倾斜了24度。上下不动，左右移动。

• 经测试，skewY，让蓝色的左右两边，延垂直方向（Y轴）倾斜。左右不动，上下移动。如下图：