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>

列印頁面