Extract -webkit-transform matrix3d ​​values

Question

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

This would help me a lot to get the values ​​of the 3D transformation matrix from CSS.

Can this be done?

If not, how can I build a transformation that runs -webkit-perspective-origin? I decided to transform only one perspective, but this has a promising beginning with x = y = 0, which is not always the case.

I understand that this particular case (a perspective with a start at some point x, y, z) may turn out to be a simple transformation x, y, z, immediately followed by a perspective transformation (or vice versa), but the method of extracting the actual 4x4 3D matrices. If I have a matrix, I no longer need to re-track the steps I took to transform the CSS3 elements to apply the same transformations to the geometry that I intend to do with <canvas> .

I looked here ( http://www.w3.org/TR/css3-3d-transforms/ ) for reference, but it does not seem that they describe the actual values ​​assigned to the matrix when applying various possible transformations. I think there should be some kind of specification sheet that goes into such details. I seem to recall, even looking somewhere in it (the definition of matrices with many trigger functions).

Edit: I found a more detailed overview of the steps that the browser takes to complete the transformations here . Does not answer my question, but it makes me one step closer to my temporary goal.

Answer 1

The element transformation matrix can be obtained using getComputedStyle. Here is an example: http://jsfiddle.net/Kxxwu/

Another way is to use the WebKitCSSMatrix interface. Its very convenient, it provides an object with matrix values, as well as 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 ...

I would like to see how you implement 3d-conversion to canvas. A good place to watch would be three. They did it, and you can see various matrix functions there.

Good luck