View in English Always switch to English

skew()

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月⁩.

skew() 函数定义了一个元素在二维平面上的倾斜转换。它的结果是一个<transform-function> 数据类型

尝试一下

transform: skew(0);

transform: skew(15deg, 15deg);

transform: skew(-0.06turn, 18deg);

transform: skew(0.312rad);

<section id="default-example">
 <img
 class="transition-all"
 id="example-element"
 src="/shared-assets/images/examples/firefox-logo.svg"
 width="200" />
</section>

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

语法

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

css

skew(ax)
skew(ax, ay)

参数值

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

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

示例

使用单个参数

HTML

html

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

CSS

css

div {
 width: 80px;
 height: 80px;
 background-color: skyblue;
}
.skewed {
 transform: skew(10deg); /* Equal to skewX(10deg) */
 background-color: pink;
}

结果

[フレーム]

使用两个参数

HTML

html

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

CSS

css

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

结果

[フレーム]

规范

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

浏览器兼容性

参见

Help improve MDN

Learn how to contribute

This page was last modified on ⁨2025年7月15日⁩ by MDN contributors.

View this page on GitHub • Report a problem with this content