skewY()

这篇翻译不完整。请帮忙从英语翻译这篇文章

CSS 的 skewY() 函数被用来构建某一元素在垂直方向上进行特定角度偏转后形成的剪切映射。这一映射是通过将其纵坐标添加一个增量实现的,这一增量和特定角度以及距离原点的距离成正比。距离原点越远的点,添加的增量就越大。

语法

skewY(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;
}

结果

文档标签和贡献者

 此页面的贡献者: Kuichen
 最后编辑者: Kuichen,