skewX()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since July 2015.

skewX() 函数定义了一个转换，该转换将元素倾斜到二维平面上的水平方向。它的结果是一个数据类型。

尝试一下

transform: skewX(0);

transform: skewX(35deg);

transform: skewX(-0.06turn);

transform: skewX(0.352rad);

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

备注： skewX(a) 相当于 skew(a)。

语法

css

skewX(a)

参数值

a: a 是一个，表示用于沿横坐标扭曲元素的角度。

笛卡儿坐标 ℝ²	齐次坐标 ℝℙ²	笛卡儿坐标 ℝ³	齐次坐标 ℝℙ³
$(\begin{matrix} 1 & tan(ay) \\ 0 & 1 \end{matrix})$	$(\begin{matrix} 1 & tan(ay) & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} 1 & tan(ay) & 0 \\ 0 & 1 & 0 \\ 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} 1 & tan(ay) & 0 & 0 \\ 0 & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{matrix})$
$(\begin{matrix} 1 & tan(ay) \\ 0 & 1 \end{matrix})$	`[1 0 tan(a) 1 0 0]`

示例

HTML

html

Normal
Skewed

CSS

css

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

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

结果

规范

Specification
CSS Transforms Module Level 1 # funcdef-transform-skewx

浏览器兼容性

参见

transform