CSS3 Animation On Transform: Rotate. Way To Fetch Current Deg Of The Rotating Element?

i am working on a html5 interface wich uses drag and drop. While i am dragging an element, the target gets a css-class, which makes it bidirectionally rotate due to a -webkit-anima

Solution 1:

I recently had to write a function that does exactly what you want! Feel free to use it:

// Parameter element should be a DOM Element object.
// Returns the rotation of the element in degrees.
function getRotationDegrees(element) {
    // get the computed style object for the element
    var style = window.getComputedStyle(element);
    // this string will be in the form 'matrix(a, b, c, d, tx, ty)'
    var transformString = style['-webkit-transform']
                       || style['-moz-transform']
                       || style['transform'] ;
    if (!transformString || transformString == 'none')
        return 0;
    var splits = transformString.split(',');
    // parse the string to get a and b
    var parenLoc = splits[0].indexOf('(');
    var a = parseFloat(splits[0].substr(parenLoc+1));
    var b = parseFloat(splits[1]);
    // doing atan2 on b, a will give you the angle in radians
    var rad = Math.atan2(b, a);
    var deg = 180 * rad / Math.PI;
    // instead of having values from -180 to 180, get 0 to 360
    if (deg < 0) deg += 360;
    return deg;
}

Hope this helps!

EDIT I updated the code to work with matrix3d strings, but it still only gives the 2d rotation degrees (ie. rotation around the Z axis).

Solution 2:

window.getComputedStyle(element,null)['-webkit-transform'] will return a string representing current transformation matrix. You can calculate its rotation degree from that string by first parsing it, then applying a few maths on it.