How to Extract Rotation Angle from -moz-transform in jQuery?

Determining Element Rotation Angle with -moz-transform Property in jQuery

jQuery enables you to retrieve and manipulate various aspects of an element's style, including its transformations. This question focuses on extracting the rotation value applied to an element using the -moz-transform property specifically.

The provided CSS styles demonstrate a transformation for a layer that includes a rotation of 7.5 degrees. Using the code snippet:

$('.element').css("-moz-transform")

will return a matrix representation of the transformation. However, this matrix does not directly provide the rotation angle.

To obtain the rotation value, you can utilize the following jQuery function:

function getRotationDegrees(obj) {
    var matrix = obj.css("-webkit-transform") ||
    obj.css("-moz-transform")    ||
    obj.css("-ms-transform")     ||
    obj.css("-o-transform")      ||
    obj.css("transform");
    if(matrix !== 'none') {
        var values = matrix.split('(')[1].split(')')[0].split(',');
        var a = values[0];
        var b = values[1];
        var angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
    } else { var angle = 0; }
    return (angle < 0) ? angle + 360 : angle;
}

angle1 = getRotationDegrees($('#myDiv'));
angle2 = getRotationDegrees($('.mySpan a:last-child'));

This function extracts the rotation angle from the CSS transform matrix by splitting and parsing its components. It supports cross-browser compatibility by checking for different transform property variants.

By invoking the function with the desired jQuery element, you can retrieve the rotation angle in degrees. This allows for precise manipulation and adjustment of rotations applied to elements using CSS.

The above is the detailed content of How to Extract Rotation Angle from -moz-transform in jQuery?. For more information, please follow other related articles on the PHP Chinese website!