Extraer -webkit-transform valores matrix3d ​​

Question

Estoy tratando de representar formas 3D usando <canvas> (contexto 2d), lo que significa que tengo que realizar algunas transformaciones proyectivas manuales.

Me ayudaría mucho poder recuperar los valores de la matriz de transformación 3D del CSS.

¿Se puede hacer esto?

En caso negativo, ¿cómo puedo construir la transformación realizada por -webkit-perspective-origin? He calculado la transformación solo por la perspectiva, pero tiene el origen de la perspectiva en x = y = 0, que no siempre es el caso.

Me doy cuenta de que este caso específico (perspectiva con origen en algún punto x, y, z) puede ser una simple traducción x, y, z inmediatamente seguida de la transformación de perspectiva (o al revés) pero la respuesta ideal sería un método para extraer la matriz 3D 4x4 real. Si tengo la matriz, ya no tengo que volver a rastrear los pasos que hice para transformar mis elementos CSS3 con el fin de aplicar las mismas transformaciones a la geometría que pretendo representar usando <canvas>.

Miré aquí (http://www.w3.org/TR/css3-3d-transforms/) como referencia, pero no parece que describan los valores reales que se asignan a la matriz cuando se aplican las diferentes transformaciones posibles. Creo que debería haber alguna hoja de especificaciones que entre en detalles. Me parece recordar incluso echarle un vistazo (definiciones de matriz con muchas funciones trigonométricas) en alguna parte.

Editar: Encontré una descripción más detallada de los pasos que realiza el navegador para realizar las transformaciones here. No responde mi pregunta pero me acerca un paso más a mi objetivo temporal.

Answer 1

La matriz de transformación de un elemento se puede recuperar a través de getComputedStyle. Aquí hay un ejemplo: http://jsfiddle.net/Kxxwu/

Otra forma sería utilizar la interfaz WebKitCSSMatrix. Es muy práctico, que proporciona un objeto con valores de la matriz y también algunos métodos: http://developer.apple.com/library/safari/#documentation/AudioVideo/Reference/WebKitCSSMatrixClassReference/WebKitCSSMatrix/WebKitCSSMatrix.html

La parte mala es que WebKitCSSMatrix no está implementado en otros navegadores ...

Me gustaría ver cómo se está implementando 3d transformarte en lienzo. Un buen lugar para echar un vistazo sería three.js. Lo han hecho y puedes ver varias funciones de matriz allí.

¡Buena suerte!