什么-webkit-transform：matrix3d（）呢？

Question

我需要在html画布内的图像上应用3D变换（非仿射/透视）。我在div上使用了matrix3d（）来执行此操作，但由于Matrix3d（）只能在DOM元素上使用，我无法找到在html canvas中对象进行这些转换的方法。为此，我需要编写一个脚本，它可以执行与matrix3d（）转换相同的操作。 更具体地说，我需要知道在matrix3d（）函数中作为参数传递的16个值的含义以及它们经历的数学运算。

Answer 1

16个数字表示4x4同质变换矩阵（see Wikipedia）中包含的值。 常规表单是输入坐标A的输出坐标B的组件，并给出CSS样式：

matrix3d(a1, b1, c1, d1, a2, b2, c2, d2, a3, b3, c3, d3, a4, b4, c4, d4)

是：

B_x = A_x * a1 + A_y * a2 + A_z * a_3 + a4;
B_y = A_x * b1 + A_y * b2 + A_z * b_3 + b4;
B_Z = A_x * c1 + A_y * c2 + A_z * c_3 + c4;

[这假定d1 = d2 = d3 = 0和d4 = 1]

的典型值

因此，向量[a4, b4, c4]对应于平移，其余9个值表示缩放和旋转变换。