CSS参考手册
变换 | Transforms
skew()
该skew()
CSS函数是一个剪切映射,或平延,通过在每个方向上以一定角度扭曲元素的每个点。这是通过将每个坐标增加一个与指定角度成比例的值和到原点的距离来完成的。离原点越远,该点增加的值就越大。其结果是一个<transform-function>
数据类型。
语法
skew(ax)
skew(ax, ay)
可能值
ax
代表沿着横坐标元素扭曲的角度<angle>
。
ay
代表沿着纵坐标元素扭曲的角度<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>
变换 | Transforms相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。