CSS 函数 - skewX()_CSS 菜鸟教程

CSS 函数 skewX（） 指定一种转换，该转换将元素在 2D 平面上水平倾斜，从而产生数据类型 <transform-function>。

可能的值

a - 指<angle>，它指定用于沿水平轴（x 坐标）扭曲元素的角度。

这种变换称为剪切映射或横流，它使元素内的点在水平方向上扭曲一个角度。

它根据指定的角度和距原点的距离改变每个点的水平位置，离原点越远的点受到的影响更大。

注意：skewX（a）等同于 skew（a）。

语法

 skewX(a)

CSS skewX（） - 基本示例

以下示例演示了 skewX（） 的用法：

<html>
<head>
<style>
	 	.skew-demo {
	 	 	 transform: skewX(30deg);
	 	 	 background-color: #4CAF50;
	 	 	 color: white;
	 	 	 padding: 20px;
	 	 	 margin-bottom: 20px;
	 	 	 text-align: center;
	 	}
	 	.normal-demo {
	 	 	 background-color: #f44336;
	 	 	 color: white;
	 	 	 padding: 20px;
	 	 	 text-align: center;
	 	}
</style>
</head>
<body>
<h2>skewX and normal</h2>
	 	<div class="skew-demo">This is a skewed div element.</div>
	 	<div class="normal-demo">This is a normal div element.</div>
</body>
</html>

<< CSS 函数 - skewY() CSS 函数 - scale() >>