CSS参考手册
变换 | Transforms
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>
变换 | Transforms相关
层叠样式表( Cascading Style Sheets )是一种用来表现 HTML 或 XML 等文件样式的计算机语言。CSS 不仅可以静态地修饰网页,还可以配合各种脚本语言动态地对网页各元素进行格式化。