Get number of CSS3 rotation cycles from matrix3d

Question

I am trying to rotate an image using CSS3 rotateY. I need to get the angle of the rotation using jQuery.

My problem is understanding how many cycles the image has rotated.

Example:

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)

As you can see with each 180 degrees, the absolute value of the third element adds 0.00000000000000012246467991473532. I would be satisfied with this result, however at some point this logic breaks and does not apply any more.

After the 4th cycle numbers that are being added become random.

What is correct way to get number of rotation cycles?

you can find you answer here [matrix3d value][1] [1]: http://stackoverflow.com/questions/7982053/get-translate3d-values-of-a-div — Gildas.Tambo, Jun 26 '13 at 05:26

score 0 · Answer 1 · edited May 23 '17 at 12:05

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

Some more great documentation is given here: https://developer.mozilla.org, Google and Microsoft seems to have nothing useful, Apple has some.

Everything has begun from this article: css3 converting matrix3d values. Thanks to the author for starting point and math conversions.

But the answer given there is not complete, it works in WebKit only.

Working code has been written in plain JavaScript because: - it can be copy-pasted to any environment - it works a bit (or much, depends) faster

If you want jQuery version, use this snippet to get the matrixStyle string.

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

Each part of the matrix is explained here : http://9elements.com/html5demos/matrix3d/

Well, i have always known how to get matrixStyle and in the end this is what i decided to use. But i really do not understand how this is caluclated and why there is no information about it... — dorkster, Sep 15 '13 at 08:01

Get number of CSS3 rotation cycles from matrix3d

1 Answers1