matrix()

Baseline Widely available

This feature is well established and works across many devices and browser versions. It’s been available across browsers since September 2015.

CSS 函数 matrix() 指定了一个由指定的 6 个值组成的 2D 变换矩阵。这种矩阵的常量值是隐含的，而不是由参数传递的；其他的参数是以列优先的顺序描述的。

matrix(a, b, c, d, tx, ty) 是 matrix3d(a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1) 的简写。

备注： 直到 Firefox 16, Gecko 才接受对于 tx 和 ty 的 <length> 值。

css

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

ℝ²下的笛卡尔坐标	ℝℙ²下齐次坐标	ℝ³下的笛卡尔坐标	ℝℙ³下的齐次坐标
$(\begin{matrix} a & c \\ b & d \end{matrix})$	$(\begin{matrix} \end{matrix})$ a c tx b d ty 0 0 1	$(\begin{matrix} a c tx \end{matrix})$ b d ty 0 0 1	$(\begin{matrix} a & c & 0 & tx \\ b & d & 0 & ty \\ 0 & 0 & 1 & 0 \\ 0 & 0 & 0 & 1 \end{matrix})$
$(\begin{matrix} a & c \\ b & d \end{matrix})$	`[a b c d tx ty]`	$(\begin{matrix} a c tx \end{matrix})$ b d ty 0 0 1

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

html

<div>正常</div>
<div class="changed">改变后</div>

css

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

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

Specification
CSS Transforms Module Level 1 # funcdef-transform-matrix