skew() - CSS（层叠样式表） 编辑

这个资源的交互案例在GitHub库中，如果您想贡献一个交互的案例，请克隆https://github.com/mdn/interactive-examples并且通过提交pull request给我们。

这种转换是一种剪切映射(横切)，它在水平和垂直方向上将单元内的每个点扭曲一定的角度。每个点的坐标根据指定的角度以及到原点的距离，进行成比例的值调整；因此，一个点离原点越远，其增加的值就越大。

语法

 skew() 函数指定一个或两个参数，它们表示在每个方向上应用的倾斜量。

skew(ax)

skew(ax, ay)

参数值

ax

ax 是一个 <angle>，表示用于沿横坐标扭曲元素的角度。

ay

ay 是一个 <angle> ，表示用于沿纵坐标扭曲元素的角度。如果未定义，则其默认值为0，导致纯水平倾斜。

示例

使用单个参数

HTML

<div>Normal</div>
<div class="skewed">Skewed</div>

CSS

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.skewed {
  transform: skew(10deg); /* Equal to skewX(10deg) */
  background-color: pink;
}

结果

使用两个参数

HTML

<div>Normal</div>
<div class="skewed">Skewed</div>

CSS

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.skewed {
  transform: skew(10deg, 10deg);
  background-color: pink;
}

结果

规范

浏览器兼容

有关兼容性信息，请参阅 <transform-function> 的数据类型。

另请参阅

• transform
• <transform-function>