skewY()

该skewX()CSS函数是一个垂直方向上的剪切映射，即在垂直方向上以一定的角度扭曲的元素的每个点。这是通过将横坐标增加一个与指定角度成比例的值以及到原点的距离来完成的。离原点越远，改点增加的值就越大。其结果是一个<transform-function>数据类型。

语法

skewY(a)

可能值

a代表沿纵坐标扭曲元素的角度<angle>。

| 1 tan(a) 0 1 0 0 |

实例

HTML

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

CSS

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

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

结果

另见

• transform

• <transform-function>