CSS 数据类型

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>此文本倾斜 20 度角。</p>
      </div>
      <div class="normal-demo">
         <h2>Normal</h2>
         <p>此文本没有倾斜。</p>
      </div>
   </div>
</body>
</html>