CSS中skewCSS中skew 在 CSS 中，skew() 是 transform 属性的一个函数，用于对元素进行倾

CSS中skew

在 CSS 中，skew() 是 transform 属性的一个函数，用于对元素进行倾斜（剪切）变形。它通过指定水平或垂直方向的倾斜角度，改变元素的形状，但不会影响元素的尺寸或位置（布局流中的位置可能变化）。

1. 基本语法

transform: skew(ax, ay);  /* 水平倾斜角度 + 垂直倾斜角度 */
transform: skewX(ax);     /* 仅水平倾斜 */
transform: skewY(ay);     /* 仅垂直倾斜 */

参数：
- ax：水平倾斜角度（单位：deg 或 rad），正值向左倾斜，负值向右倾斜。
- ay：垂直倾斜角度（单位：deg 或 rad），正值向下倾斜，负值向上倾斜。

2. 使用示例

2.1 水平倾斜（skewX）

<div class="box">skewX(20deg)</div>

.box {
  width: 200px;
  height: 100px;
  background-color: lightblue;
  transform: skewX(20deg); /* 水平向左倾斜 20 度 */
}

效果：元素沿 X 轴向左倾斜，形成平行四边形。

2.2 垂直倾斜（skewY）

<div class="box">skewY(-15deg)</div>

.box {
  width: 200px;
  height: 100px;
  background-color: lightcoral;
  transform: skewY(-15deg); /* 垂直向上倾斜 15 度 */
}

效果：元素沿 Y 轴向上倾斜，形成梯形。

2.3 同时倾斜（skew）

<div class="box">skew(20deg, -10deg)</div>

.box {
  width: 200px;
  height: 100px;
  background-color: lightgreen;
  transform: skew(20deg, -10deg); /* 水平向左 20 度，垂直向上 10 度 */
}

效果：元素同时沿 X 和 Y 轴倾斜，形成复杂变形。

3. 倾斜原理

坐标系：以元素的中心为原点，X 轴向右，Y 轴向下。
倾斜效果：元素沿着指定角度“剪切”变形，但整体面积和尺寸不变。
数学本质：通过矩阵变换实现，skew(ax, ay) 对应的变换矩阵为：
```
[1       tan(ax)  0]
[tan(ay) 1        0]
[0       0        1]
```

4. 实际应用场景

4.1 按钮倾斜效果

.button {
  padding: 10px 20px;
  background-color: #3498db;
  color: white;
  transform: skewX(-15deg);
  transition: transform 0.3s;
}

.button:hover {
  transform: skewX(0); /* 悬停时恢复原状 */
}

4.2 卡片阴影倾斜

.card {
  width: 200px;
  height: 300px;
  background: white;
  position: relative;
}

.card::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.1);
  transform: skewX(10deg); /* 阴影倾斜 */
  z-index: -1;
}

4.3 斜切边框

.box {
  width: 200px;
  height: 100px;
  position: relative;
  background: lightblue;
}

.box::before {
  content: '';
  position: absolute;
  top: -5px;
  left: -5px;
  width: calc(100% + 10px);
  height: calc(100% + 10px);
  background: linear-gradient(45deg, #ff6b6b, #4ecdc4);
  z-index: -1;
  transform: skew(-5deg, -5deg); /* 边框倾斜 */
}

5. 注意事项

文本可读性：倾斜后的文本可能难以阅读，需谨慎使用。
布局影响：
- 倾斜元素会占据原始布局位置（可能与其他元素重叠）。
- 使用 transform 不会触发重排（reflow），性能较好。

子元素继承：子元素会继承父容器的倾斜效果，可通过反向倾斜抵消：

.parent {
  transform: skewX(20deg);
}
.child {
  transform: skewX(-20deg); /* 抵消父元素的倾斜 */
}

浏览器兼容性：现代浏览器均支持，旧版浏览器需前缀（如 -webkit-transform）。

6. 与其他变形函数结合

skew() 可以与其他 transform 函数（如 rotate、scale、translate）组合使用，用空格分隔：

.box {
  transform: skewX(20deg) rotate(10deg) scale(1.2);
}

总结

特性	说明
功能	对元素进行水平或垂直倾斜变形
语法	`skew(ax, ay)` / `skewX(ax)` / `skewY(ay)`
单位	角度（`deg`）或弧度（`rad`）
性能	使用 GPU 加速，性能较好
适用场景	按钮、卡片、装饰性元素、动态效果等
注意	倾斜文本可能影响可读性，子元素需反向倾斜抵消效果

通过合理使用 skew()，可以为网页设计增添动态和创意效果。

更多vue相关插件及后台管理模板可访问vue admin reference，代码详情请访问github