skewX()

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

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

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

语法

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

<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 Status Comment
CSS Transforms Level 1
skewX()
Working Draft Initial definition

浏览器兼容

有关兼容性信息,请参阅 <transform-function> 的数据类型。

另请参阅