skewX()
该skewX() CSS函数是一个水平方向上的剪切映射，即在水平方向上以一定的角度扭曲的元素的每个点。这是通过将横坐标增加一个与指定角度成比例的值以及到原点的距离来完成的。离原点越远，改点增加的值就越大。其结果是一个<transform-function>数据类型。
语法
skewX(a)可能值
a是代表沿着横坐标扭曲元素的角度<angle>。
Cartesian coordinates on ?2 | Homogeneous coordinates on ??2 | Cartesian coordinates on ?3 | Homogeneous coordinates on ??3 |
|---|---|---|---|
1tan(ay)01 | 1tan(ay)0010001 | 1tan(ay)0010001 | 1tan(ay)00010000100001 |
| 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>
本文档系腾讯云开发者社区成员共同维护，如有问题请联系 cloudcommunity@tencent.com
