CSS 函式 - skewX()

CSS 函式 `skewX()` 指定了一種變換，它在二維平面上水平傾斜元素，產生 `<transform-function>` 資料型別。

可能的值

a - 指的是一個 `<angle>`，它指定用於沿水平軸 (x 座標) 扭曲元素的角度。

這種變換，稱為剪下對映或推移，透過水平方向上的角度來扭曲元素內的點。
它根據指定角度和距原點的距離改變每個點的水平位置，距原點越遠的點受影響越大。

注意：`skewX(a)` 等同於 `skew(a)`。

語法

skewX(a)

CSS skewX() - 基本示例

以下示例演示了 `skewX()` 的用法。

<html>
<head>
<style>
   .skew-demo {
      transform: skewX(30deg);
      background-color: #4CAF50;
      color: white;
      padding: 20px;
      margin-bottom: 20px;
      text-align: center;
   }
   .normal-demo {
      background-color: #f44336;
      color: white;
      padding: 20px;
      text-align: center;
   }
</style>
</head>
<body>
<h2>skewX and normal</h2>
   <div class="skew-demo">This is a skewed div element.</div>
   <div class="normal-demo">This is a normal div element.</div>
</body>
</html>

列印頁面