Skip to main content

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

参数值​

a b c d 描述线性变换的 <number>

tx ty 描述如何应用这个变换的 <number>

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

// 这些值表示以下函数：

matrix(scaleX(), skewY(), skewX(), scaleY(), translateX(), translateY());

Try it​

<div>Normal</div>
<div class="changed">Changed</div>
div {
  width: 80px;
  height: 80px;
  background-color: skyblue;
}

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