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 <length> 值.

语法

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

参数值

a b c d
描述线性变换的 <number>
tx ty
描述如何应用这个变换的 <number>
2 下的笛卡尔坐标 ℝℙ齐次坐标 3下的笛卡尔坐标 ℝℙ3下的齐次坐标
ac bd actybdtx001 actybdtx001 ac0txbd0ty00100001
[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;
}

结果

请看英文版案例 https://wiki.developer.mozilla.org/en-US/docs/Web/CSS/transform-function/matrix#Result