skew()

Baseline Widely available

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

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

尝试一下

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

语法

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

css
skew(ax)

skew(ax, ay)

参数值

ax

ax 是一个 <angle>,表示用于沿横坐标扭曲元素的角度。

ay

ay 是一个 <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

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

浏览器兼容性

Report problems with this compatibility data on GitHub
desktopmobile
Chrome
Edge
Firefox
Opera
Safari
Chrome Android
Firefox for Android
Opera Android
Safari on iOS
Samsung Internet
WebView Android
WebView on iOS
skew()

Legend

Tip: you can click/tap on a cell for more information.

Full support
Full support
See implementation notes.

参见