skewY()

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.

skewY() CSS 函数 用于定义在二维平面上沿垂直方向倾斜元素的变换。其结果为 <transform-function> 数据类型。

试试看

这种变换是一种剪切映射（平移），它通过在垂直方向上以一定角度扭曲元素内的每个点来实现。每个点的纵坐标（垂直，y 坐标）通过与指定角度和到原点的距离成比例的值进行修改；因此，点离原点越远，添加的值就越大。

语法

css
skewY(a)

Values

a

表示用于沿纵坐标（垂直，y 坐标）扭曲元素的角度的 <angle>。

笛卡尔坐标 在 ℝ^2 上 齐次坐标 在 ℝℙ^2 上 笛卡尔坐标在 ℝ^3 上 齐次坐标在 ℝℙ^3 上
( 1 0 tan ( a ) 1 ) \left( \begin{array}{cc} 1 & 0 \\ \tan(a) & 1 \end{array} \right) ( 1 0 0 tan ( a ) 1 0 0 0 1 ) \left( \begin{array}{ccc} 1 & 0 & 0 \\ \tan(a) & 1 & 0 \\ 0 & 0 & 1 \end{array} \right) ( 1 0 0 tan ( a ) 1 0 0 0 1 ) \left( \begin{array}{ccc} 1 & 0 & 0 \\ \tan(a) & 1 & 0 \\ 0 & 0 & 1 \end{array} \right) ( 1 0 0 0 tan ( a ) 1 0 0 0 0 1 0 0 0 0 1 ) \left( \begin{array}{cccc} 1 & 0 & 0 & 0 \\ \tan(a) & 1 & 0 & 0 \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{array} \right)
[1 tan(a) 0 1 0 0]

示例

HTML

html
<div>Normal</div>
<div class="skewed">Skewed</div>

CSS

css
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.skewed {
  transform: skewY(40deg);
  background-color: pink;
}

Result

规范

Specification
CSS Transforms Module Level 1
# funcdef-transform-skewy

浏览器兼容性

BCD tables only load in the browser

另请参阅