Javascript：CSS变换透视的矩阵运算

Question

我正在使用this script，它声称实现了the spec 中描述的matrix3d 操作，但是脚本缺少矩阵透视操作，所以我“煮”了一些我不确定是否准确或正确的东西。

// the perspective matrix to multiply with
CSSMatrix.Perspective = function(x, y, z){
  var m = new CSSMatrix();
  m.m13 = x;
  m.m23 = y;
  m.m33 = z;
  return m;
};

以及使用这个矩阵的方法

// myMatrix.perspective(x,y,z); to apply a perspective matrix
CSSMatrix.prototype.perspective = function(x, y, z){
  if (y == null) y = 0;
  if (z == null) z = 0;
  return CSSMatrix.multiply(this, CSSMatrix.Perspective(x, y, z));
};

我的问题是，如果y 和z 是undefined，应该使用什么值？它会像旋转一样，x 用于所有其他轴，还是像上面代码中的 0（零）？

我也不确定CSSMatrix.Perspective 矩阵是否按照规范中的描述正确编写并实现到CSSMatrix 原型中。

更新： 我找到了透视函数的另一个实现（见下文）并创建了一个fiddle 来证明它不能正常工作。

CSSMatrix.prototype.perspective = function(d){
  return CSSMatrix.multiply(this, CSSMatrix.Perspective(d));
};
CSSMatrix.Perspective = function(d){
  var m = new CSSMatrix(); 
  m.m43 = -1/d; 
  return m;
};

请问为什么这两个值不同？

感谢您的回复。

Answer 1

这里的问题似乎是 3d 矩阵在规范/文档中的表示方式（例如 Mozilla CDN docs）与它在 CSSMatrix polyfill 的 code 中的表示方式。该代码使用文档中表示的矩阵的转置版本。代码可以正常工作，但如果我们考虑规范/文档中使用的 maxtrix，代码所指的矩阵位置 [3,4] 实际上是位置 [4,3]。

关于计算透视的公式：根据 MDN 文档here，应使用/乘以以下矩阵来应用透视（d 是透视值）：

a1 a2 a3 a4    1 0  0   0
b1 b2 b3 b4 =  0 1  0   0
c1 c2 c3 c4    0 0  1   0
d1 d2 d3 d4    0 0 −1/d 1 

所以你走在正确的道路上，但是由于 polyfill 的代码在内部引用矩阵的方式，你错误地构造了透视矩阵。代替m.m43 = -1/d;，使用m.m34 = -1/d;

我已经用固定代码here 更新了小提琴。

Answer 2

根据“透视”属性的规范，它只接受一个参数，即“长度”。它不接受 X、Y 和 Z。

参考：W3ORG - Perspective Property

参考：W3School's Perspective Example

我知道，我没有为您的 Perspective 提供解决方案，但所写的并不是预期的行为。如果我对您的问题的理解是错误的，请告诉我，我会尽力帮助您。谢谢。