CSS skew() 语法
在 CSS 中，skew() 函数一般作为 transform 属性的值，用于将元素沿 X 轴或 Y 轴倾斜。
语法：
transform: skew(x-angle, y-angle);说明：
skew() 函数接收以下 2 个参数。
x-angle：表示沿 X 轴的倾斜角度，可以是角度值（如 30deg、0.5rad）或 0。y-angle：表示沿 Y 轴的倾斜角度，同样可以是角度值或 0。
对于 skew() 函数，小伙伴们需要清楚以下几点：
- skew() 只会影响元素视觉效果，而不会改变元素的实际布局大小（即盒模型仍保持不变）。
- skew() 角度值可以是正数（顺时针倾斜），也可以是负数（逆时针倾斜）。
- skew() 可以与其他变换函数（如 translate()、rotate()、scale()）搭配一起使用，使用的顺序会影响最终效果。
- skew() 倾斜角度要适度，如果角度过大，可能会让元素严重变形，影响可读性和用户体验。
CSS skew() 摘要
| 属于 | CSS 倾斜 |
|---|---|
| 使用频率 | 中 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS skew() 示例
接下来，我们通过几个简单的例子来讲解一下 CSS skew() 函数是如何使用的。
示例 1：skew() 实现 X 轴倾斜
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
margin: 50px;
background-color: lightskyblue;
transform: skew(20deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，transform: skew(20deg) 表示将 div 元素沿 X 轴倾斜 20 度，这样会创建平行四边形效果。由于这里并没有指定 Y 轴倾斜角度，此时 Y 轴倾斜角度会使用默认值（即 0），因此最终只会影响水平方向。
示例 2：skew() 实现 X 和 Y 轴同时倾斜
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
margin: 50px;
background-color: lightskyblue;
transform: skew(15deg, 10deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
skew(15deg, 10deg) 表示将 div 元素沿 X 轴倾斜 15 度，并且沿 Y 轴倾斜 10 度。
示例 3：skew() 结合过渡效果
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
margin: 50px;
background-color: lightskyblue;
transition: transform 0.5s ease;
}
div:hover {
transform: skew(-20deg, 5deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>默认情况下，页面效果如下图 1 所示。当鼠标移到 div 元素上时，页面效果如下图 2 所示。
分析：
在这个例子中，我们使用 transition 属性来添加过渡效果。当鼠标移到 div 元素上时，div 元素会沿 X 轴逆向倾斜 20 度，并且沿 Y 轴倾斜 5 度。
注意: 虽然目前所有主流浏览器都支持 skew() 函数，但在 CSS 标准中它被视为遗留函数（主要为了向后兼容）。在编写新代码时，建议小伙伴们优先使用 skewX() 和 skewY() 来分别控制。
