Extract -webkit-transform matrix3d values
3d, css, graphics, html, javascript
Solution
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!
Problem
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.