css3中的skew()是transform属性提供的一个变换函数，主要用来让元素沿着水平或垂直方向发生倾斜变形。和rotate的旋转不同，skew更像是对元素进行错切，让方方正正的盒子变成平行四边形。在网页里做视觉层次、按钮悬浮、标签倾斜等效果时非常实用。
skew()的基本语法
skew()可以直接写在transform里，常见写法有三种：
skew(xAngle, yAngle)：同时设置x轴和y轴倾斜角度skewX(angle)：只沿x轴倾斜skewY(angle)：只沿y轴倾斜
角度单位用deg，比如30deg。正数和负数代表不同倾斜方向。
单独使用skewX和skewY
下面例子让一个方块沿x轴倾斜30度，看起来像向右倒的平行四边形：
.box {
width: 200px;
height: 100px;
background: #4ca3ff;
transform: skewX(30deg);
}
如果改成skewY(-20deg)，元素会沿y轴向上错切：
.box {
width: 200px;
height: 100px;
background: #ff8a4c;
transform: skewY(-20deg);
}
同时使用x和y倾斜
也可以两个方向一起写，第一个值是x轴，第二个是y轴：
.card {
width: 240px;
height: 120px;
background: #66cc99;
transform: skew(15deg, 10deg);
}
和transition结合做动效
skew()经常配合transition做鼠标悬浮变形。下面的代码让按钮Hover时轻轻倾斜：
.btn {
padding: 10px 20px;
background: #333;
color: #fff;
border: none;
transition: transform 0.3s ease;
}
.btn:hover {
transform: skewX(-10deg);
}
使用注意点
| 注意项 | 说明 |
|---|---|
| 不影响布局空间 | skew()只是视觉变形，元素原本占的位置不变 |
| 子元素会跟着歪 | 倾斜后内部文字和子标签也会变形，可用反向skew修正 |
| 兼容性 | 现代浏览器都支持，老旧IE需要-ms-前缀 |
反向修正内部文字
如果只想让外框倾斜但里面文字正着，可以给文字加反向skew：
<div class="skew-box"> <span class="txt">正常文字</span> </div>
.skew-box {
width: 200px;
height: 80px;
background: #ddd;
transform: skewX(20deg);
}
.txt {
display: inline-block;
transform: skewX(-20deg);
}
小结
css3的skew()属性用起来不复杂，记住它是错切变形、单位是deg、可分开控制x和y就行。日常做卡片、标签、按钮的微交互都很方便。多写几个例子试试，很快就能熟练运用。