在此页

• 句法
• 范例
• 规范
• 浏览器兼容性
• 另请参阅
• 相关话题

matrix() CSS function defines a homogeneous 2D transformation matrix. Its result is a <transform-function> data type.

注意： matrix(a, b, c, d, tx, ty) is a shorthand for matrix3d (a, b, 0, 0, c, d, 0, 0, 0, 0, 1, 0, tx, ty, 0, 1) .

句法

matrix() function is specified with six values. The constant values are implied and not passed as parameters; the other parameters are described in the column-major order.

注意： Until Firefox 16, Gecko accepted a <length> value for tx and ty .

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

值

a b c d

Are <number> s describing the linear transformation.

tx ty

Are <number> s describing the translation to apply.

Cartesian coordinates on ℝ 2	Homogeneous coordinates on ℝℙ 2	Cartesian coordinates on ℝ 3	Homogeneous coordinates on ℝℙ 3
$\left(\begin{array}{cc}a& c\\ b& d\end{array}\right)$	$\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)$
	[a b c d tx ty]

The values represent the following functions:
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 Transforms Level 1 The definition of 'matrix()' in that specification.	工作草案	初始定义

浏览器兼容性

Please see the <transform-function> data type for compatibility info.

另请参阅

• transform
• <transform-function>
• matrix3d()
• Understanding the CSS Transforms Matrix

元数据

• 最后修改： 2020 年 11 月 3 日

相关话题

1. CSS
2. CSS 参考