CSS skewY() 语法
在 CSS 中，skewY() 函数通常作为 transform 属性的值，用于将元素沿垂直方向（Y 轴）进行倾斜。
语法：
transform: skewY(angle);说明：
angle 是倾斜的角度，它支持的单位包括：
- deg（度，最常用）。
- rad（弧度）。
- turn（圈）。
angle 可以是正值，也可以是负值。
- 正值：元素会顺时针方向倾斜。
- 负值：元素会逆时针方向倾斜。
对于 skewY() 函数，小伙伴们需要清楚以下几点。
- skewY() 只会影响元素在 Y 轴方向的倾斜，而 X 轴方向保持不变。
- skewY() 可以与其他变换函数（如 translate()、rotate()、scale() 等）结合使用，来创建复杂的视觉效果。
- skewY() 倾斜角度不能过大，否则可能导致元素严重变形，然后影响用户体验。
CSS skewY() 摘要
| 属于 | CSS 倾斜 |
|---|---|
| 使用频率 | 中 |
| 兼容性 | 查看 |
| 官方文档 | 查看 |
| MDN | 查看 |
CSS skewY() 示例
接下来，我们通过几个简单的例子来讲解一下 CSS skewY() 函数是如何使用的。
示例 1：skewY() 实现垂直倾斜
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
margin: 50px;
background-color: lightskyblue;
transform: skewY(20deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，skewY(20deg) 表示将 div 元素沿 Y 轴顺时针倾斜 20°。
示例 2：skewY() 结合 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 ease;
}
div:hover {
transform: skewY(-15deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>默认情况下，页面效果如下图 1 所示。当鼠标移到 div 元素上时，页面效果如下图 2 所示。
分析：
在这个例子中，我们使用了 transition 属性来定义了一个过渡效果。当鼠标移到 div 元素上时，会有一个逆时针倾斜 15° 的平滑过渡效果。
示例 3：skewY() 与 rotate() 结合
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div {
width: 100px;
height: 100px;
margin: 50px;
background-color: lightskyblue;
transform: skewY(10deg) rotate(45deg);
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们结合 skewY(10deg) 和 rotate(45deg) 使用，此时元素会先沿 Y 轴倾斜 10 度，然后再旋转 45 度。
示例 4：skewY() 结合 CSS 变量
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
:root {
--skew-angle: 20deg;
}
@keyframes skew-animate {
0% { transform: skewY(var(--skew-angle)); }
100% { transform: skewY(calc(var(--skew-angle) * -1)); }
}
div {
width: 100px;
height: 100px;
margin: 50px;
background-color: hotpink;
animation: skew-animate 2s infinite alternate;
}
</style>
</head>
<body>
<div></div>
</body>
</html>页面效果如下图所示。
分析：
在这个例子中，我们首先在 :root 中定义了一个 CSS 变量：--skew-angle。然后，在 @keyframes 规则来定义了一个 CSS 动画，并且在 @keyframes 中使用了该变量。
