transform: matrix() & matrix3d()

发表于 更新于 本文字数： 1k 阅读时长 ≈ 2 分钟

2D 图形的坐标

笛卡尔坐标系

笛卡尔坐标系

原点 (0, 0) 在元素的左上角，每一个点由向量 (x, y) 标记。

进行变换的时候，对每个点做矩阵乘法：

$$ \left\lgroup \matrix{a & c\cr b & d} \right\rgroup \left\lgroup \matrix{x \cr y} \right\rgroup = \left\lgroup \matrix{ax + cy\cr bx + dy} \right\rgroup $$

可以在一行中应用多次变换：

$$ \left\lgroup \matrix{a_1 & c_1\cr b_1 & d_1} \right\rgroup \left\lgroup \matrix{a_2 & c_2\cr b_2 & d_2} \right\rgroup = \left\lgroup \matrix{a_1a_2 + c_1b_2 & a_1c_2 + c_1d_2\cr b_1a_2 + d_1b_2 & b_1c_2 + d_1d_2} \right\rgroup $$

使用这种标记可以描述多种常用的变换：旋转、缩放、倾斜。事实上所有这些变换都是线性函数可以描述的。使用这种标记时有一种非线性的变换需要当做特例，就是平移。平移向量 (tx, ty) 必须作为两个附加的参数来表述。

函数定义的变换 matrix()

语法

matrix(a, b, c, d, tx, ty)
  • a, b, c, d 描述线性变换的数字
  • tx, ty 描述平移的数字

示例

.pane {
  background: green;
  width: 200px;
  height: 200px;
}

.box {
  float: left;
  background: blue;
  width: 50px;
  height: 50px;
  transform-origin: 0 0;
}

.more {
  float: left;
  width: 50px;
  height: 50px;
  background: red;
}
上下左右各平移 4px
.box {
  transform: matrix(1, 0, 0, 1, 4, 4);
}
放大两倍
.box {
  transform: matrix(2, 0, 0, 2, 0, 0);
}
旋转
.box {
  transform: matrix(2, 1, -1, 2, 0, 0);
}

Tip: 为什么平移不是线性变换？

一个线性变换 f，会使 f(x + y) = f(x) + f(y) 成立

而平移：y = ax + b