skewY()

尝试一下

skewY() 函数定义了一个转换，该转换将元素倾斜到二维平面上的垂直方向。它的结果是一个<transform-function>数据类型。

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

skewY(a)

a 是一个 <angle>，表示元素沿纵坐标扭曲的角度。

实坐标系 ℝ² 齐次坐标系ℝℙ² 实坐标系 ℝ³ 齐次坐标系ℝℙ³

实坐标系 ℝ²	齐次坐标系ℝℙ²	实坐标系 ℝ³	齐次坐标系ℝℙ³
$(\begin{matrix} 1 & 0 \end{matrix})$ $(\begin{matrix} \end{matrix})$ $(\begin{matrix} tan(ax) & 1 \end{matrix})$	$(\begin{matrix} 1 & 0 & 0 \end{matrix})$ $(\begin{matrix} tan(ax) & 1 & 0 \end{matrix})$ $(\begin{matrix} 0 & 0 1 \end{matrix})$	$(\begin{matrix} 1 & 0 & 0 \end{matrix})$ $(\begin{matrix} tan(ax) & 1 & 0 \end{matrix})$ $(\begin{matrix} 0 & 0 & 1 \end{matrix})$	$(\begin{matrix} 1 & 0 & 0 & 0 \end{matrix})$ $(\begin{matrix} tan(ax) & 1 & 0 & 0 \end{matrix})$ $(\begin{matrix} 0 & 0 & 1 & 0 \end{matrix})$ $(\begin{matrix} 0 & 0 & 0 & 1 \end{matrix})$
`[1 tan(a) 0 1 0 0]`

$(\begin{matrix} 1 & 0 \end{matrix})$

$(\begin{matrix} \end{matrix})$ $(\begin{matrix} tan(ax) & 1 \end{matrix})$

$(\begin{matrix} 1 & 0 & 0 \end{matrix})$

$(\begin{matrix} tan(ax) & 1 & 0 \end{matrix})$

$(\begin{matrix} 0 & 0 1 \end{matrix})$

$(\begin{matrix} 1 & 0 & 0 \end{matrix})$

$(\begin{matrix} tan(ax) & 1 & 0 \end{matrix})$

$(\begin{matrix} 0 & 0 & 1 \end{matrix})$

$(\begin{matrix} 1 & 0 & 0 & 0 \end{matrix})$

$(\begin{matrix} tan(ax) & 1 & 0 & 0 \end{matrix})$

$(\begin{matrix} 0 & 0 & 1 & 0 \end{matrix})$

$(\begin{matrix} 0 & 0 & 0 & 1 \end{matrix})$

[1 tan(a) 0 1 0 0]

<p>foo</p>
<p class="transformed">bar</p>

p {
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed {
  transform: skewY(40deg);
  background-color: blue;
}

Specification	Status	Comment
CSS Transforms Level 1 skewY()	Working Draft	Initial definition

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