skewX()
skewX()
函数定义了一个转换,该转换将元素倾斜到二维平面上的水平方向。它的结果是一个<transform-function>
数据类型。
尝试一下
这种转换是一种剪切映射 (横切),它在水平和垂直方向上将单元内的每个点扭曲一定的角度。每个点的坐标根据指定的角度以及到原点的距离,进行成比例的值调整;因此,一个点离原点越远,其增加的值就越大。
备注: skewX(a)
相当于 skew(a)
。
语法
skewX(a)
参数值
a
-
a
是一个<angle>
,表示用于沿横坐标扭曲元素的角度。
笛卡儿坐标 ℝ2 | 齐次坐标 ℝℙ2 | 笛卡儿坐标 ℝ3 | 齐次坐标 ℝℙ3 |
---|---|---|---|
[1 0 tan(a) 1 0 0] |
示例
HTML
<div>Normal</div>
<div class="skewed">Skewed</div>
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 |
浏览器兼容性
BCD tables only load in the browser