提取-webkit-transform matrix3d值

时间:2012-05-02 01:45:47

标签: javascript html5 graphics css3 3d

我正在尝试使用<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函数的矩阵定义)。

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

1 个答案:

答案 0 :(得分:4)

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

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

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

想了解如何将3D转换实现为画布。一个好看的地方是three.js。他们已经做到了,你可以在那里看到各种矩阵函数。

祝你好运!