Wie reverse-engineering ein webkit matrix3d ​​transform

Question

Ich habe ein Würfelelement gedreht und übersetzt in einem 3D-Raum.

Ich möchte herausfinden, nur der RotateY Teil dieser Transformation zu einem bestimmten Zeitpunkt. Ist das möglich?

ich habe:

var cube = document.getElementById("cube"); 
var transform = getComputedStyle(cube).webkitTransform; 

//the value of transform is: 
// matrix3d(-1, 0, 0.00000000000000012246467991473532, 0, 
//   0, 1, 0, 0, 
//   -0.00000000000000012246467991473532, 0, -1, 0, 
//   0, 0, 0, 1) 

Hilfe? :-)

Answer 1

Wenn Ihr Objekt nur um Y gedreht wird, dann ist die Rotation einfach zu berechnen - es ist die arccos of Matrix elements 1,1 oder 3,3 oder die Arsin von - (Element 3,1) oder arcsin von Element 1 ,3. In Ihrem konkreten Beispiel sind es etwa 180 Grad. Wenn die Rotationen mehr als nur die y-Achse sind, müssen Sie mit der Verfolgung früherer Rotationen beginnen und es kann unordentlicher werden.

Ihre Übersetzung wird nur die unterste Zeile der Ausgabematrix sein, in diesem Fall 0,0,0.

Beispiele auf http://www.inversereality.org/tutorials/graphics%20programming/3dwmatrices.html

Answer 2

Sie können Transformation Informationen mit dem "neuen WebKitCSSMatrix" Funktion abrufen. Zum Beispiel:

var matrix = new WebKitCSSMatrix($('#element').css('-webkit-transform')); 
var translateZ = matrix.m43; 

Jeder Teil der Matrix erklären hier: http://9elements.com/html5demos/matrix3d/ Sie können mehr complexe Eigenschaften wie rotationX abrufen, für 3D-Matrix mit Mathe Chaos:

var rotationX = Math.acos(matrix.a) * (180/Math.PI); 
var rotationY = Math.asin(matrix.b) * (180/Math.PI); 

Answer 3

Gegeben Funktion bestimmt rotation*, transform* und scale für gegebenes DOM-Element cross-browser.

Wenn Sie etwas mehr wollen, oder Fehler in der Mathematik finden, es ist eine Diskussion über math.stackexchange.com

auf Browser getestet in http://caniuse.com/transforms3d aufgeführt:

var reverseEngineerTransform3d = function (domElement, parameterName) { 

     parameterName = parameterName.toLowerCase(); 

     var computedStyle = window.getComputedStyle(domElement), 
      matrixStyle = computedStyle.transform || computedStyle.WebkitTransform || computedStyle.MozTransform || computedStyle.msTransform || computedStyle.OTransform; 

     if (matrixStyle) { 
      matrixStyle = matrixStyle.trim(); 
     } 

     if (matrixStyle === 'none') { 
      if (parameterName.indexOf('rotate') === 0) { 
       return '0deg'; 
      } else if (parameterName.indexOf('translate') === 0) { 
       return '0px'; 
      } else if (parameterName === 'scale') { 
       return 1; 
      } else { 
       throw "Unsupported 3D parameter " + parameterName; 
      } 
     } 

     else if (!matrixStyle || matrixStyle.substr(0, 9) !== 'matrix3d(') { 
      //return something or die ????? 
      throw "Something is wrong with 3D transform style. Probably no style applied at all OR unknown CSS3 vendor OR unknown/unsupported 3D matrix representation string OR CSS3 3D transform is not fully supported in this browser"; 
     } 

     var matrix = window.WebKitCSSMatrix && (new WebKitCSSMatrix(matrixStyle)) || 
       window.MozCSSMatrix && (new MozCSSMatrix(matrixStyle)) || 
       window.MsCSSMatrix && (new MsCSSMatrix(matrixStyle)) || 
       window.OCSSMatrix && (new OCSSMatrix(matrixStyle)) || 
       window.CSSMatrix && (new CSSMatrix(matrixStyle)); // sorry 4 copy-paste my friends 

     if (!matrix || isNaN(matrix.a) || isNaN(matrix.b) || isNaN(matrix.c) || isNaN(matrix.m41) || isNaN(matrix.m42) || isNaN(matrix.m43) || isNaN(matrix.m11)) { 
      throw "Could not catch CSSMatrix constructor for current browser, OR the constructor has returned a non-standard matrix object (need .a, .b, .c and mXX numerical properties to work)"; 
     } 


     // todo: giving a parameters array (and returning an array) is a good idea, or we could return everything if no parameters given 

     switch (parameterName) { 

      case 'rotatey': // in degrees 
       return Math.acos(matrix.m11)*180/Math.PI * (matrix.m13 > 0 ? -1 : 1) + 'deg'; 

      case 'rotatex': // in degrees 
       return Math.asin(matrix.m22)*180/Math.PI + 'deg'; 

      case 'rotatez': // in degrees 
       throw "TODO: Sorry, math people. I really need help here! Please implement this case for me. This will help you: http://9elements.com/html5demos/matrix3d/"; 

      case 'translatex': // in pixels 
       return matrix.m41 + 'px'; 

      case 'translatey': // in pixels 
       return matrix.m42 + 'px'; 

      case 'translatez': // in pixels 
       return matrix.m43 + 'px'; 

      case 'scale': // no units 
       if (matrix.m11 === matrix.m22 && matrix.m22 === matrix.m33) { 
        return matrix.m11; 
       } else { 
        throw "I'm not so smart to calculate scale from this matrix"; 
       } 

      // todo: anything else? skew ???? 

      default: 
       throw "This function accepts 3d-parameter name (case-insensitive string) as the second argument. Currently supported: 'rotate[xyz]', 'translate[xyz]', 'scale'. This parameter is unsupported: " + parameterName; 
     } 
    };