CSS skewX() 语法
在 CSS 中，skewX() 函数一般作为 transform 属性的值，用于将元素沿水平方向（X 轴）进行倾斜。
语法：
transform: skewX(angle);说明：
angle 表示倾斜的角度，常见单位有：
- deg（度）。
- rad（弧度）。
- turn（圈）。
对于 skewX() 函数，小伙伴们还需要清楚以下几点：
- skewX() 只会影响元素的视觉效果，而不会改变其实际布局尺寸，也不会影响周围元素的排列方式。
- skewX() 可以和其他变换函数（如 rotate()、scale()、translate() 等）搭配一起使用，来实现更复杂的效果。
- skewX() 倾斜角度不宜过大，一般建议控制在 -45deg 到 45deg 之间，以免出现严重的变形，而影响页面的用户体验。
CSS skewX() 摘要
| 属于 | CSS 倾斜 |
|---|---|
| 使用频率 | 中 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS skewX() 示例
接下来，我们通过几个简单的例子来讲解一下 CSS skewX() 函数是如何使用的。
示例 1：skewX() 实现水平倾斜
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
margin: 50px;
background-color: lightskyblue;
transform: skewX(20deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，skewX(20deg) 表示将 div 元素沿 X 轴向右倾斜 20 度，这样会产生平行四边形效果。
示例 2：skewX() 结合 CSS 过渡
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
margin: 50px;
background-color: hotpink;
transition: transform 0.5s;
}
div:hover {
transform: skewX(-30deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>默认情况下，页面效果如下图 1 所示。当鼠标移到 div 元素上时，页面效果如下图 2 所示。
分析：
这里使用 transition 属性为 transform 属性添加 0.5 秒的过渡效果。当鼠标移到 div 元素上时，由于设置了 skewX(-30deg) ，因此它会向左平滑地倾斜 30°。
示例 3：skewX() 结合 rotate()
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
margin: 50px;
background-color: hotpink;
transform: skewX(25deg) rotate(45deg);
transition: transform 0.3s;
}
div:hover {
transform: skewX(-25deg) rotate(-45deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>默认情况下，页面效果如下图 1 所示。当鼠标移到 div 元素上时，页面效果如下图 2 所示。
分析：
在这个例子中，我们结合 skewX(25deg) 和 rotate(45deg) 来实现复杂的效果。当鼠标移到 div 元素时，它反向倾斜和旋转（skewX(-25deg) rotate(-45deg)），并且有一个 0.3 秒的过渡效果。
