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

我正在使用声称实现the spec中所述的matrix3d操作的this script,但是该脚本缺少矩阵透视图操作,因此我“煮熟了”我不确定是正确还是正确的东西.

// 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原型中.

更新：
我发现了透视图函数的另一种实现方式(请参见下文),并创建了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;
};

为什么两个值不同？

感谢您的答复.

解决方法:

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

关于用于计算透视图的公式：根据MDN docs 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更新了小提琴.

标签：matrix,css-transforms,javascript
来源： https://codeday.me/bug/20191119/2032605.html