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

Question

我正在使用 this script that claims to implement matrix3d operation as described in the spec，但是脚本缺少矩阵透视操作，所以我 "cooked" 我不确定是否准确。

// 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

根据 'Perspective' 属性的规范，它只接受一个参数，即 'length'。它不接受 X、Y 和 Z。

参考：W3ORG - Perspective Property

参考：W3School's Perspective Example

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

Answer 2

这里的问题似乎是 3d 矩阵如何在 spec/docs 中表示（例如 Mozilla CDN docs) vs how it's represented in the CSSMatrix polyfill's code。代码使用文档中表示的矩阵的转置版本。代码工作正常但是如果我们考虑在 spec/docs.

中使用的 maxtrix，代码所指的矩阵位置 [3,4] 实际上是位置 [4,3]

关于计算透视的公式：根据 MDN 文档 here，以下矩阵应 used/multiplied 用于应用透视（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.m34 = -1/d;

而不是 m.m43 = -1/d;

我已经用固定代码 here 更新了 fiddle。

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

Javascript: matrix operations for CSS transform perspective

javascript

matrix

css-transforms