Javascript:CSS转换透视图的矩阵操作

我使用该声明来实现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

是

未定义的

，应该使用什么值？它是否会像旋转一样，其中

x

用于所有其他轴，还是像上述代码中的0（零）

我也不确定

CSSMatrix.Perspective

矩阵是否按照规范中的描述正确编写并实现到

CSSMatrix

原型中

更新： 我找到了透视函数的另一个实现（见下文），并创建了一个示例来证明它不起作用

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;
};

为什么这两个值不同

---

感谢您的回复。

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

参考：

参考：

---

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

这里的问题似乎是3d矩阵在规范/文档中的表示方式（例如）与在CSSMatrix polyfill中的表示方式。代码使用文档中表示的矩阵的转置版本。代码工作正常，但是如果我们考虑规范/DOCs中使用的Max，则代码引用的矩阵位置[3,4]实际上是位置[4，3]。 关于计算透视图的公式：根据MDN文档，应用透视图时应使用/乘以以下矩阵（

d

为透视图值）：

因此，您走的是正确的道路，但是由于polyfill的代码在内部引用矩阵的方式，您错误地构建了透视矩阵。而不是

m.m43=-1/d，使用
m.m34=-1/d

我已经用固定代码更新了小提琴。
谢谢。你的答案没有帮助，但是我发现了类似的东西，但将其添加到我的代码中不起作用。我用新发现更新了问题，你能看一下吗？你好，朋友，我查看了你添加的新参考代码。我也看了看你的小提琴，但即使经过很多努力，我还是不能得到确切的答案。对不起，我对你没有任何帮助。希望你能尽早得到解决方案。谢谢。非常感谢，这真的是失败了，但是，由于某些原因，它在我的设置中无法正常工作，似乎透视必须始终位于对象中的第一位。@thednp-我可以通过小提琴中的测试确认，透视必须位于转换参数中的第一位。是的，将确保按正确的顺序重新排列对象元素：透视、旋转/倾斜、平移、缩放；再次感谢。我修复了属性顺序的问题，但我遇到了另一个问题，也许您可以看看
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