skewY()

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

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

语法

skewY(a)

参数值

a
a 是一个 <angle>,表示元素沿纵坐标扭曲的角度。
实坐标系 ℝ2 齐次坐标系ℝℙ2 实坐标系 ℝ3 齐次坐标系ℝℙ3

1           0

tan(ax)  1

1                0     0

tan(ax)      1     0

0                 0    1 

1             0        0

tan(ax)   1        0

0              0       1

1            0  0  0

tan(ax) 1   0  0

0            0  1  0

0            0  0  1

[1 tan(a) 0 1 0 0]

示例

HTML

<p>foo</p>
<p class="transformed">bar</p>

CSS

p { 
  width: 50px;
  height: 50px;
  background-color: teal;
}

.transformed {
  transform: skewY(40deg);
  background-color: blue;
}

结果

规范

Specification Status Comment
CSS Transforms Level 1
skewY()
Working Draft Initial definition

浏览器兼容

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

另请参阅