skewX()

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.

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

尝试一下

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

备注: skewX(a) 相当于 skew(a)

语法

css
skewX(a)

参数值

a

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

笛卡儿坐标 ℝ2 齐次坐标 ℝℙ2 笛卡儿坐标 ℝ3 齐次坐标 ℝℙ3
1tan(ay)01 1tan(ay)0010001 1tan(ay)0010001 1tan(ay)00010000100001
[1 0 tan(a) 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: skewX(10deg); /* Equal to skew(10deg) */
  background-color: pink;
}

结果

规范

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

浏览器兼容性

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
skewX()

Legend

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

Full support
Full support

参见