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)
参数值
示例
使用单个参数
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 |
浏览器兼容性
BCD tables only load in the browser