CSS 函数 - skewY（）

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

这种变换称为剪切映射或横流，它使元素内的点垂直扭曲一个角度。
它根据指定的角度和距原点的距离调整每个点的垂直位置，对离原点较远的点影响更大。

语法


skewY(a)

可能的值

a - 是一个 <angle> 值，表示用于使元素沿垂直轴（y 坐标）变形的角度。

CSS skewY（） - 基本示例

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


<html>
<head>
<style>
	 	.container {
	 	 	 display: flex;
	 	 	 flex-direction: column;
	 	 	 align-items: center;
	 	 	 justify-content: center;
	 	 	 height: 100vh;
	 	}
	 	.skewY-demo {
	 	 	 transform: skewY(20deg);
	 	 	 background-color: #87CEEB;
	 	 	 padding: 20px;
	 	 	 margin-bottom: 20px;
	 	}
	 	 	 .normal-demo {
	 	 	 background-color: #FFC300 ;
	 	 	 padding: 20px;
	 	}
</style>
</head>
<body>
	 	<div class="container">
	 	 	 <div class="skewY-demo">
	 	 	 	 	<h2>SkewY</h2>
	 	 	 	 	<p>This text is skewed at a 20 degree angle.</p>
	 	 	 </div>
	 	 	 <div class="normal-demo">
	 	 	 	 	<h2>Normal</h2>
	 	 	 	 	<p>This text is not skewed.</p>
	 	 	 </div>
	 	</div>
</body>
</html>

打印本页