index.md

title	slug
skew()	Web/CSS/transform-function/skew

{{CSSRef}}

skew() 函数定义了一个元素在二维平面上的倾斜转换。它的结果是一个{{cssxref("<transform-function>")}} 数据类型{{EmbedInteractiveExample("pages/css/function-skew.html")}}

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

语法

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

skew(ax)

skew(ax, ay)

参数值

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

笛卡儿坐标 ℝ2	齐次坐标 ℝℙ2	笛卡儿坐标 ℝ3	齐次坐标 ℝℙ3
1tan(ax)tan(ay)1	1tan(ax)0tan(ay)10001	1tan(ax)0tan(ay)10001	1tan(ax)00tan(ay)10000100001
	[1 tan(ay) tan(ax) 1 0 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;
}

结果

{{EmbedLiveSample("使用单个参数", 200, 200)}}

使用两个参数

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;
}

结果

{{EmbedLiveSample("使用两个参数", 200, 200)}}

规范

{{Specifications}}

浏览器兼容性

{{Compat}}

参见

• {{cssxref("transform")}}
• {{cssxref("<transform-function>")}}