CSS 函式 - skew()

CSS 函式skew()指定一個在二維平面上傾斜元素的變換，生成<transform-function>資料型別。

可能的值

ax - 表示一個<angle>，用於指定沿 x 軸傾斜元素的角度。
ay - 表示一個<angle>，用於指定沿 y 軸扭曲元素的角度。如果未指定，則預設為 0，導致純粹的水平傾斜。

這種變換，稱為剪下對映或平移，會在水平和垂直方向上同時傾斜元素內的點。
它模擬了透過指定角度拖動元素每個角的效果。點的座標根據指定的角度和距原點的距離進行調整，距離越遠的點受影響越大。

語法

skew()函式可以有一個或兩個值來確定水平和垂直方向上的傾斜程度。如果只指定一個值，則應用於 x 軸，而 y 軸不受影響。

skew(ax)
skew(ax, ay)

CSS skew() - 僅 X 軸

以下示例演示了skew()僅在一個軸上傾斜的使用方法

<html>
<head>
<style>
   .container {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      margin: 50px;
   }
   .skew-demo {
      transform: skew(20deg);
      background-color: #FFC107;
      width: 200px;
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      font-weight: bold;
      color: #fff;
   }
      .normal-demo {
      background-color: #2196F3;
      width: 200px;
      height: 200px;
      display: flex;
      justify-content: center;
      align-items: center;
      font-size: 24px;
      font-weight: bold;
      color: #fff;
   }
</style>
</head>
<body>
   <div class="container">
      <div class="skew-demo">This is div element showing Skew</div>
      <div class="normal-demo">This is a div element showing Normal</div>
   </div>
</body>
</html>

CSS skew() - 兩個軸

以下示例演示了skew()在兩個軸上同時傾斜的使用方法

<html>
<head>
<style>
   .container {
   width: 200px;
   height: 200px;
   margin-top: 40px;
   margin-left: 40px;
   background-color: #DAF7A6;
   transform: skew(20deg, 10deg);
   }
</style>
</head>
<body>
   <div class="container">
   <p>This is an example of skewing on both axes.</p>
</div>
</body>
</html>

列印頁面