skew()
skew()
该skew() CSS函数是一个剪切映射，或平延，通过在每个方向上以一定角度扭曲元素的每个点。这是通过将每个坐标增加一个与指定角度成比例的值和到原点的距离来完成的。离原点越远，该点增加的值就越大。其结果是一个<transform-function>数据类型。
语法
skew(ax)
skew(ax, ay)
可能值
ax代表沿着横坐标元素扭曲的角度<angle>。
| Cartesian coordinates on ℝ2 | Homogeneous coordinates on ℝℙ2 | Cartesian coordinates on ℝ3 | Homogeneous coordinates on ℝℙ3 |
|---|---|---|---|
| 1tan(ax)tan(ay)1 | 1tan(ax)0tan(ay)10001 | 1tan(ax)0tan(ay)10001 | 1tan(ax)00tan(ay)10000100001 |
| 1 tan(ay) tan(ax) 1 0 0 |
实例
使用一个单一的X角
HTML
<div>Normal</div>
<div class="skewed">Skewed</div>
CSS
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.skewed {
/* Equivalent to skewX(10deg) */
transform: skew(10deg
background-color: pink;
}
结果
使用两个角度
HTML
<div>Normal</div>
<div class="skewed">Skewed</div>
CSS
div {
width: 80px;
height: 80px;
background-color: skyblue;
}
.skewed {
transform: skew(10deg, 10deg
background-color: pink;
}
结果
另见
transform
- <transform-function>
