--- title: matrix() slug: Web/CSS/transform-function/matrix translation_of: Web/CSS/transform-function/matrix() original_slug: Web/CSS/transform-function/matrix() ---

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 的 {{cssxref("<length>")}} 值.

语法

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

参数值

a b c d: 描述线性变换的 {{cssxref("<number>")}} 。
tx ty: 描述如何应用这个变换的 {{cssxref("<number>")}} 。

ℝ²下的笛卡尔坐标	ℝℙ²下齐次坐标	ℝ³下的笛卡尔坐标	ℝℙ³下的齐次坐标
$(\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>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;
}

结果

请看英文版案例 /zh-CN/docs/Web/CSS/transform-function/matrix#Result