使用 transform: skew 结合 transition 可实现倾斜动画。1. skew() 用于元素倾斜变形，支持 X、Y 轴单独或同时倾斜，transition 控制过渡效果。2. 实现时先设置默认状态，hover 时应用 skew 角度，通过 transition 定义 0.3s 缓动过渡。3. 注意需对 transform 属性添加 transition，因 skew 属于 transform 值，且应避免在非块级元素使用以防布局问题。4. 常用于按钮悬停、卡片入场等场景，如 .btn:hover 配合 skew(-5deg) 实现趣味交互，关键在于 transition 正确作用于 transform 以确保动画平滑生效。
使用 CSS 的 transform: skew 结合 transition 可以实现元素在倾斜状态之间平滑过渡的动画效果。关键在于设置初始倾斜角度，再通过交互（如 hover）改变倾斜值，并用 transition 控制过渡过程。
1. 基本语法与属性说明
skew() 用于对元素进行倾斜变形，接受一个或两个参数：
- skewX(angle)：仅在 X 轴方向倾斜
- skewY(angle)：仅在 Y 轴方向倾斜
- skew(x-angle, y-angle)：同时设置 X 和 Y 轴倾斜角度
transition 控制变化过程的持续时间、缓动函数等。
2. 实现步骤
要让元素在鼠标悬停时倾斜并平滑恢复，按以下方式编写样式：
立即学习“前端免费学习笔记（深入）”；
.box {
width: 100px;
height: 100px;
background: #3498db;
transition: transform 0.3s ease;
}
.box:hover {
transform: skew(15deg, 5deg);
}
说明：
- 默认状态下元素无倾斜
- hover 时应用 skew(15deg, 5deg)，X 轴倾斜 15°，Y 轴倾斜 5°
- transition 让倾斜变化在 0.3 秒内缓动完成
3. 注意事项
使用 skew + transition 时需注意：
- 必须对 transform 属性添加 transition，而不是 skew 单独生效
- transform 是可过渡的复合属性，skew 作为其值可以被动画化
- 避免在非定位或非块级元素上使用，可能导致布局异常
- 若需复位其他 transform 效果，建议写完整值以免叠加错乱
4. 实际应用场景
常见用途包括：
- 按钮悬停时轻微倾斜增强交互感
- 卡片翻转前的动态入场效果
- 导航项的趣味性强调动画
例如按钮倾斜反馈：
.btn {
display: inline-block;
padding: 10px 20px;
background: #e74c3c;
color: white;
transition: transform 0.2s cubic-bezier(0.68, -0.55, 0.26, 1.55);
}
.btn:hover {
transform: skew(-5deg);
}
基本上就这些。只要正确设置 transform 和 transition，skew 动画就能自然呈现。不复杂但容易忽略的是 transition 必须作用于 transform，而非单独属性。
