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>