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.

 

练习代码：

 

 1 
15 
16 
"top">
17 
"bottom">

 

 

效果：

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

 

 

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