My current endeavor involves rendering 3D shapes using the <canvas> (2d context), requiring manual projective transformations.
I am eager to retrieve the 3D transformation matrix values from the CSS, as that would greatly aid my process.
Is it possible to accomplish this task?
If not, I am seeking guidance on constructing the transformation carried out by -webkit-perspective-origin. While I have deciphered the perspective aspect alone, the challenge lies in determining the perspective origin, which is not always at x=y=0.
While I understand that a specific case like this one could potentially involve a simple x, y, z translation followed immediately by the perspective transform (or vice versa), what I truly desire is a method to extract the actual 4x4 3D matrix. Having access to this matrix would eliminate the need to retrace my previous steps in transforming CSS3 elements, allowing me to apply the same transforms directly to geometry for rendering with <canvas>.
Although I referred to http://www.w3.org/TR/css3-3d-transforms/ for insights, the detailed matrix values assigned during various transformations seemed absent. It seems like there should be a spec sheet somewhere providing such information, possibly involving intricate trigonometric functions.
Update: I stumbled upon a more comprehensive guide outlining the browser's transformation processes here. Although it doesn't directly answer my query, it does bring me closer to my temporary objective.