View in EnglishAlways switch to English

skewY()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since ⁨2015年7月⁩.

skewY()CSS 函数用于定义在二维平面上沿垂直方向倾斜元素的变换。其结果是<transform-function> 数据类型。

尝试一下

transform: skewY(0);

transform: skewY(35deg);

transform: skewY(-0.06turn);

transform: skewY(0.352rad);

<section>  <img          src="/shared-assets/images/examples/firefox-logo.svg"    width="200" /></section>

此类变换是一种剪切影射，它会将元素内的每个点在垂直方向上按一定的角度进行扭曲。每个点的纵坐标（垂直方向，y 坐标）会根据指定的角度和该点到原点的距离按比例进行调整；因此，离原点越远的点，其被调整的值就越大。

css

skewY(a)

ℝ^2 上的笛卡尔坐标	ℝℙ^2 上的齐次坐标	ℝ^3 上的笛卡尔坐标	ℝℙ^3 上的齐次坐标
$(\begin{matrix} 1 & 0 \\ tan (a) & 1 \end{matrix}) \left( \begin{array}{cc} 1 & 0 \\ \tan(a) & 1 \end{array} \right)$	$(\begin{matrix} 1 & 0 & 0 \\ tan (a) & 1 & 0 \\ 0 & 0 & 1 \end{matrix}) \left( \begin{array}{ccc} 1 & 0 & 0 \\ \tan(a) & 1 & 0 \\ 0 & 0 & 1 \end{array} \right)$	$(\begin{matrix} 1 & 0 & 0 \\ tan (a) & 1 & 0 \\ 0 & 0 & 1 \end{matrix}) \left( \begin{array}{ccc} 1 & 0 & 0 \\ \tan(a) & 1 & 0 \\ 0 & 0 & 1 \end{array} \right)$	$(\begin{matrix} 1 & 0 & 0 & 0 \\ tan (a) & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{matrix}) \left( \begin{array}{cccc} 1 & 0 & 0 & 0 \\ \tan(a) & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{array} \right)$
	`[1 tan(a) 0 1 0 0]`

<skewY()> =
skewY([<angle>|<zero>])

html

<div>正常</div><div>倾斜</div>

css

div {  width: 80px;  height: 80px;  background-color: skyblue;}.skewed {  transform: skewY(40deg);  background-color: pink;}

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

This page was last modified on⁨2025年11月10日⁩ byMDN contributors.