skewX()

skewX()

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

语法

skewX(a)

可能值

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

| 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
  background-color: pink;
}

结果

另见

• transform

• <transform-function>