transform: skew() 可使元素沿X、Y轴倾斜，常用于按钮悬停、斜角标签等动态设计；语法为skew(ax)或skew(ax, ay)，需注意布局错位与内容反向校正，结合transition可实现流畅动画效果。
css中的transform: skew()属性可以用来让元素沿X轴、Y轴或两个方向倾斜，创造出独特的视觉效果。这个属性在制作动态按钮、卡片翻转、背景装饰等场景中非常实用。使用得当，能提升页面的交互感和设计感。
skew() 基本语法
skew函数接受一个或两个角度参数：
• skew(ax)：只沿X轴倾斜（水平方向），ax为倾斜角度，单位deg
• skew(ax, ay)：同时沿X轴和Y轴倾斜，ay为Y轴倾斜角度
• 如果只写一个值，ay默认为0
示例：
transform: skew(20deg); /* 向右倾斜 */
transform: skew(0, 10deg); /* 向上/下拉伸倾斜 */
transform: skew(15deg, 5deg); /* X和Y同时倾斜 */
实际应用场景
常见用途包括创建斜角卡片、倾斜导航项、动态悬停效果等。
立即学习“前端免费学习笔记（深入）”；
• 倾斜按钮悬停效果：鼠标移入时轻微倾斜，增加动感
• 斜切标签或徽章：用skew(-15deg)做出“倾斜贴纸”效果
• 背景装饰块：配合rotate和scale做出抽象图形
例子：创建一个倾斜标签
.badge {
background: #ff6b6b;
color: white;
padding: 8px 12px;
transform: skew(-15deg);
display: inline-block;
}
注意事项与技巧
skew会改变元素的坐标系，可能影响布局和点击区域，需注意以下几点：
• 倾斜后元素仍占据原始文档流位置，可能造成视觉错位
• 可结合transform-origin调整旋转/倾斜中心点
• 若需要恢复内部内容正向显示，可在子元素中反向skew
• 动画中使用skew时建议加上transition实现平滑过渡
例如：悬停倾斜动画
.btn {
transition: transform 0.3s ease;
}
.btn:hover {
transform: skew(10deg);
}
基本上就这些，skew是个简单但表现力强的属性，合理使用能让界面更生动。