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>数据类型。
尝试一下
transform: skewX(0);
transform: skewX(35deg);
transform: skewX(-0.06turn);
transform: skewX(0.352rad);
<section id="default-example">
<img
class="transition-all"
id="example-element"
src="/shared-assets/images/examples/firefox-logo.svg"
width="200" />
</section>
这种转换是一种剪切映射 (横切)，它在水平和垂直方向上将单元内的每个点扭曲一定的角度。每个点的坐标根据指定的角度以及到原点的距离，进行成比例的值调整；因此，一个点离原点越远，其增加的值就越大。
备注： skewX(a) 相当于 skew(a)。
语法
css
skewX(a)
参数值
示例
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 |