从matrix3d获取CSS3旋转周期数

Question

我想使用CSS3 rotateY旋转图像。我需要使用jQuery获取旋转的角度。

我的问题是了解图像旋转了多少个周期。

实施例：

180 degrees: matrix3d(-1, 0, -0.00000000000000012246467991473532, 0, 0, 1, 0, 0, 0.00000000000000012246467991473532, 0, -1, 0, 0, 0, 0, 1) 
360 degrees: matrix3d(1, 0, 0.00000000000000024492935982947064, 0, 0, 1, 0, 0, -0.00000000000000024492935982947064, 0, 1, 0, 0, 0, 0, 1) 
540 degrees: matrix3d(-1, 0, -0.00000000000000036739403974420594, 0, 0, 1, 0, 0, 0.00000000000000036739403974420594, 0, -1, 0, 0, 0, 0, 1) 
720 degrees: matrix3d(1, 0, 0.0000000000000004898587196589413, 0, 0, 1, 0, 0, -0.0000000000000004898587196589413, 0, 1, 0, 0, 0, 0, 1) 

正如你可以与每个180度看，该第三元件的绝对值增加0.00000000000000012246467991473532。我会对这个结果感到满意，但是在某些时候这个逻辑会破坏并且不再适用。

第4次循环后，正在添加的数字变成随机数。

获取转动周期数的正确方法是什么？

Answer 1

-------------------------- TL; DR --------------- -----------

function getRotationCycle (domElement, axis) { 

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

    if (!matrixStyle || matrixStyle.substr(0, 9) !== 'matrix3d(') { 
     //return 0; //???? 
     throw "Something's 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 = WebKitCSSMatrix && (new WebKitCSSMatrix(matrixStyle)) || 
       MozCSSMatrix && (new MozCSSMatrix(matrixStyle)) || 
       MsCSSMatrix && (new MsCSSMatrix(matrixStyle)) || 
       OCSSMatrix && (new OCSSMatrix(matrixStyle)) ||  
       CSSMatrix && (new CSSMatrix(matrixStyle))); 

    if (!matrix || isNaN(matrix.a) || isNaN(matrix.b) || isNaN(matrix.c)) { 
     //not sure about all versions of FireFox 
     throw "Could not catch CSSMatrix constructor for current browser, OR the constructor has returned a non-standard matrix object (need [a b c] numerical properties to work)"; 
    } 

    var rotation; 

    // todo: giving an axis array is a good idea, or we could return all three rotations if no parameter given 

    switch (axis.toUpperCase()) { 
     case 'X': 
      rotation = Math.acos(matrix.a); 
      break; 
     case 'Y': 
      rotation = Math.asin(matrix.b); 
      break; 
     case 'Z': 
      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/"; 
      //rotation = Math.acos(matrix.a); 
      break; 
     default: 
      throw "This function accepts rotation axis name (string) as the first parameter. Possible values: 'X', 'Y', 'Z'"; 
    } 

    //if (isNaN(rotation))... 

    rotation *= 180/Math.PI; //getting rotation in degrees. This is good for me for debug purposes but bad for performance, of course, ... 

    return rotation % 360; // ... so you can skip degrees and do it in radians only 
} 

一些更丰富的文档在这里给出：https://developer.mozilla.org， 谷歌和微软似乎已经没有什么用处，苹果有some。

---

一切都从这篇文章开始：css3 converting matrix3d values。感谢作者的出发点和数学转换。

但是，这里给出的答案并不完整，它只适用于WebKit。

工作的代码已经写在普通的JavaScript，因为： - 它可以被复制粘贴到任何环境 - 它的工作原理位（或多少，取决于）更快

如果你想jQuery的版本，使用该snippet得到matrixStyle字符串。

var matrixStyle = element$.css('transform')) || element$.css('-webkit-transform')) || element$.css('-moz-transform')) || element$.css('-ms-transform')) || element$.css('-o-transform')); // jQuery 

矩阵的每个部分在这里解释：http://9elements.com/html5demos/matrix3d/