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>

打印页面