CSS matrix() 函數

定義和用法

CSS 的 matrix() 函數通過包含六個值的矩陣來定義一個二維變換。

matrix() 函數接受六個參數，這些參數允許您對元素進行旋轉、縮放、移動和傾斜操作。

參數如下：matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())。

實例

例子 1

使用 matrix() 為幾個 <div> 元素定義二維變換：

#myDiv1 {
  transform: matrix(1, -0.3, 0, 1, 0, 50);
}
#myDiv2 {
  transform: matrix(1, 0, 0.5, 1, 50, 50);
}
#myDiv3 {
  transform: matrix(2, 1, 0.5, 1, 90, 70);
}

親自試一試

例子 2

使用 matrix() 為圖像創建二維變換：

#img1 {
  transform: matrix(1, -0.3, 0, 1, 0, 50);
}
#img2 {
  transform: matrix(1, 0, 0.5, 1, 50, 50);
}
#img3 {
  transform: matrix(2, 1, 0.5, 1, 90, 70);
}

親自試一試

CSS 語法

matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())
值 描述
scaleX() 必需。數字，用于縮放元素的寬度。
skewY() 必需。數字（角度），用于沿 Y 軸進行傾斜變換。
skewX() 必需。數字（角度），用于沿 X 軸進行傾斜變換。
scaleY() 必需。數字，用于縮放元素的高度。
translateX() 必需。數字，用于沿 X 軸移動元素。
translateY() 必需。數字，用于沿 Y 軸移動元素。

技術細節

版本： CSS Transforms Module Level 1

瀏覽器支持

表格中的數字表示首個完全支持該函數的瀏覽器版本。

Chrome Edge Firefox Safari Opera
1 12 3.5 3.1 10.5

相關頁面

參考：CSS transform 屬性

參考：CSS matrix3d() 函數

教程：CSS 2D 變換