CSS 函式 - matrix()



CSS 函式 matrix() 定義了一個具有齊次座標的二維變換矩陣,其結果資料型別為 transform()

可能的值

語法

matrix() 是一個 4x4 矩陣,但對於二維變換,只使用前 6 個值。該函式具有以下語法

matrix(a, b, c, d, tx, ty)
  • a (m11): 水平縮放。

  • b (m12): 垂直傾斜。

  • c (m21): 水平傾斜。

  • d (m22): 垂直縮放。

  • e (dx): 水平平移。

  • f (dy): 垂直平移。

matrix() 函式用於將多個變換組合到單個 transform 屬性中。

CSS matrix() - 基本示例

以下示例演示了 matrix() 的用法

<html>
<head>
<style>
   .matrix-demo {
      transform: matrix(1, -0.2, 0, 1, 0, 0);
      background-color: #000;
      color: #fff;
      padding: 20px;
      font-size: 24px;
      text-align: center;
   }
   .normal-demo {
      background-color: #ccc;
      color: #000;
      padding: 20px;
      font-size: 24px;
      text-align: center;
   }
</style>
</head>
<body>
   <div class="matrix-demo">This is a matrix div</div>
   <div class="normal-demo">This is a normal div</div>
</body>
</html>
廣告