matrix()

基线广泛可用

此功能已得到良好建立，并且可以在许多设备和浏览器版本上运行。它自以下版本起在所有浏览器中都可用 2015年9月.

matrix() CSS 函数定义了一个齐次二维变换矩阵。其结果是 <transform-function> 数据类型。

注意：matrix(a, b, c, d, tx, ty) 是 matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1) 的简写形式。

matrix() 函数使用六个值指定。常数值是隐含的，不作为参数传递；其他参数按列主序描述。

css

matrix(a, b, c, d, tx, ty)

笛卡尔坐标在 ℝ^2 上	齐次坐标在 ℝℙ^2 上	笛卡尔坐标在 ℝ^3 上	齐次坐标在 ℝℙ^3 上
$\begin{pmatrix} a & c \\ b & d \end{pmatrix}$	$\left( \begin{array}{ccc} a & c & tx \\ b & d & ty \\ 0 & 0 & 1 \\ \end{array} \right)$	$\left( \begin{array}{ccc} a & c & tx \\ b & d & ty \\ 0 & 0 & 1 \\ \end{array} \right)$	$\left( \begin{array}{cccc} a & c & 0 & tx \\ b & d & 0 & ty \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \\ \end{array} \right)$
$\begin{pmatrix} a & c \\ b & d \end{pmatrix}$	`[a b c d tx ty]`

这些值表示以下函数：matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY())

html

<div>Normal</div>
<div class="changed">Changed</div>

css

div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

.changed {
  transform: matrix(1, 2, -1, 1, 80, 80);
  background-color: pink;
}

规范
CSS 变换模块级别 1 # funcdef-transform-matrix

BCD 表格仅在启用 JavaScript 的浏览器中加载。