如何反向工程webkit矩陣3D變換

Question

我有一個立方體元素被旋轉和翻譯在三維空間。

我想找出只是在給定的時間這個變換的rotateY部分。這可能嗎？

我：

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) 

幫助？ :-)

Answer 1

如果你的對象只是旋轉約Y，那麼是的，旋轉很容易計算 - 它是arccos of Matrix elements 1,1或3,3或元素1的 - （元素3,1）或arcsin的arsin ，3。在你的具體例子中，它大約是180度。如果旋轉不僅僅是Y軸，那麼你必須開始跟蹤以前的旋轉，它可能會變得更加混亂。

您的翻譯只是輸出矩陣的底行，在這種情況下是0,0,0。

查看 http://www.inversereality.org/tutorials/graphics%20programming/3dwmatrices.html

Answer 2

例子可以檢索改造信息與「新WebKitCSSMatrix」功能。例如：

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

矩陣的每個部分是在這裏說明一下：http://9elements.com/html5demos/matrix3d/ 可以檢索更配合物的屬性，如的rotationX，支持3D矩陣數學一塌糊塗：

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

Answer 3

由於功能決定rotation*，transform*和scale給定DOM元素跨瀏覽器。

如果你想要更多的東西，或在數學發現錯誤，它的測試在瀏覽器上math.stackexchange.com

的討論中http://caniuse.com/transforms3d上市：

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; 
     } 
    };