matrix()

Baseline 已广泛支持

此特性已相当成熟，可在许多设备和浏览器版本上使用。自 ⁨2015 年 7 月⁩以来，各浏览器均已提供此特性。

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) 的简写。

试一试

transform: matrix(1.2, 0.2, -1, 0.9, 0, 20);

transform: matrix(0.4, 0, 0.5, 1.2, 60, 10);

transform: matrix(0, 1, 1, 0, 0, 0);

transform: matrix(0.1, 1, -0.3, 1, 0, 0);

<section id="default-example">
  <img
    class="transition-all"
    id="example-element"
    src="/shared-assets/images/examples/firefox-logo.svg"
    width="200" />
</section>

语法

css

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

值

matrix() 函数通过六个值指定。常量值是隐含的，不作为参数传递；其他参数按列优先顺序描述。

a b c d: 是描述线性变换的<number>。
tx ty: 是描述要应用的平移的<number>。

笛卡尔坐标，在 ℝ^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())。

正式语法

<matrix()> = 
  matrix( <number>#{6} )

示例

HTML

html

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

CSS

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

浏览器兼容性

另见

帮助改进 MDN

了解如何贡献

本页面最后由MDN 贡献者在2025年10月10日修改。

在 GitHub 上查看此页面 • 报告此内容的问题