Extract -webkit-transform matrix3d values

Question

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

如果能够从CSS中检索3D变换矩阵值，这将对我有很大帮助。

这可以做到吗？

如果不是，我如何构造由-webkit-perspective origin执行的转换？我已经弄清楚了仅针对透视图的转换，但透视图起源于x=y=0，但并不总是如此。

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

我在这里(http://www.w3.org/TR/css3-3d-transforms/)寻找参考，但在应用不同的可能转换时，它们看起来不像是描述了分配给矩阵的实际值。我认为应该有一些详细的规格表。我似乎记得甚至在某个地方看到过它(带有许多trig函数的矩阵定义)。

编辑:我找到了浏览器执行转换here所需步骤的更深入的概述。没有回答我的问题，但它确实让我离我的临时目标更近了一步。

Answer 1

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

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

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

我想看看你是如何实现三维转换到画布。一个值得一看的好地方是three.js。他们已经做到了，你可以在那里看到各种矩阵函数。

祝好运!