提取-webkit-transform matrix3d值

Question

我正在尝试使用<canvas>(2d上下文)渲染3D形状,这意味着我必须执行一些手动投影变换.

能够从CSS中检索3D变换矩阵值对我有很大帮助.

可以这样做吗？

如果没有,我如何构建由-webkit-perspective-origin执行的转换？我仅仅考虑了视角的变换,但是在x = y = 0的情况下,视角起源并非总是如此.

我意识到这个特定的情况(在某些点x,y,z的原点的透视)可能会变成一个简单的x,y,z平移,紧接着是透视变换(或者反过来),但理想的答案是是一种提取实际4x4 3D矩阵的方法.如果我有矩阵,我不再需要重新跟踪我为转换我的CSS3元素所做的步骤,以便将相同的变换应用于我打算使用的几何体<canvas>.

我在这里查看(http://www.w3.org/TR/css3-3d-transforms/)以供参考,但它们看起来并不像他们描述了在应用不同的可能转换时分配给矩阵的实际值.我认为应该有一些规格表确实如此详细.我似乎记得甚至在某处瞥见它(具有许多trig函数的矩阵定义).

编辑:我更深入地了解了浏览器在此处执行转换所需的步骤.不回答我的问题,但它确实让我更接近我的临时目标.

Answer 1

可以通过 getComputedStyle 检索元素的变换矩阵。这是一个例子： http: //jsfiddle.net/Kxxwu/

另一种方法是使用 WebKitCSSMatrix 接口。它非常方便，它提供了一个带有矩阵值的对象和一些方法： http://developer.apple.com/library/safari/#documentation/AudioVideo/Reference/WebKitCSSMatrixClassReference/WebKitCSSMatrix/WebKitCSSMatrix.html

不好的部分是 WebKitCSSMatrix 没有在其他浏览器中实现......

想看看您如何将 3D 变换实现到画布中。一个值得一窥的好地方是 Three.js。他们已经做到了，你可以在那里看到各种矩阵函数。

祝你好运！