Extract -webkit-transform matrix3d values

Question

I am trying to render 3D shapes using <canvas> (2d context), which means I have to perform some manual projective transformations.

It would help me a lot to be able to retrieve the 3D transformation matrix values from the CSS.

Can this be done?

If not, how can I construct the transformation that is performed by -webkit-perspective-origin? I've figured the transformation out for just the perspective alone, but that has the perspective origin at x=y=0 which is not always the case.

I realize that this specific case (perspective with origin at some point x, y, z) may turn out to be a simple x, y, z translation immediately followed by the perspective transform (or the other way around) but the ideal answer would be a method to extract the actual 4x4 3D matrix. If I have the matrix, I no longer have to re-trace the steps that I did to transform my CSS3 elements in order to apply the same transforms to geometry which I intend to render using <canvas>.

I looked here (http://www.w3.org/TR/css3-3d-transforms/) for reference but it does not look like they describe the actual values being assigned to the matrix when applying the different possible transformations. I think there should be some spec sheet out there that does go into such detail. I seem to recall even catching a glimpse of it (matrix definitions with lots of trig functions) somewhere.

Edit: I found a more in-depth overview of the steps the browser takes to perform the transformations here. Does not answer my question but it does get me one step closer to my temporary goal.

Answer 1

The transform matrix of an element can be retrieved via getComputedStyle. Here is an example: http://jsfiddle.net/Kxxwu/

Another way would be to use WebKitCSSMatrix interface. Its very handy, it provides an object with matrix values and also some methods: http://developer.apple.com/library/safari/#documentation/AudioVideo/Reference/WebKitCSSMatrixClassReference/WebKitCSSMatrix/WebKitCSSMatrix.html

The bad part is that WebKitCSSMatrix is not implemented in other browsers...

Would like to see how you are implementing 3d transform into canvas. A good place to peek would be three.js. They have did it and you can see various matrix functions there.

Good luck!