Home/ Questions/Q 6025591
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-23T04:19:20+00:00

I cannot read a CSS3 transform rotate value in: Opera 9.62 Opera 10.51 FireFox

  • 0

I cannot read a CSS3 transform rotate value in:

  • Opera 9.62
  • Opera 10.51
  • FireFox 4.01

Works fine in IE, Chrome and Safari, but not in these three above.
Here is the source:

<!DOCTYPE html>
<html>
<head>
    <script type="text/javascript" src="jquery-1.6.1.min.js"></script>
    <style>
        div {
            -webkit-transform:     rotate(-5deg);
            -moz-transform:        rotate(-5deg);
            -o-transform:        rotate(-5deg);
            -ms-transform:        rotate(-5deg);
            transform:            rotate(-5deg);
            border: 1px solid black;
        }
    </style>
    <script type="text/javascript">
        $(document).ready(function () {

            // tries to read the CSS rotate data
            // starts by reading -webkit-transform, if it
            // fails then read -moz-transform and so on
            var getRotation = function ($e) {
                var value = $e.css('-webkit-transform');
                if (value === undefined) {
                    value = $e.css('-moz-transform');
                    if (value === undefined) {
                        value = $e.css('-o-transform');
                        if (value === undefined) {
                            value = $e.css('-ms-transform');
                            if (value === undefined) {
                                value = $e.css('transform');
                            }
                        }
                    }
                }
                return value === undefined? '' : value;
            };

            var returnValue = getRotation($("div"));
            alert(returnValue === ''?
                "Failed to get rotation info!" : 
                "Got it: " + returnValue);
        });
    </script>
</head>
<body>
    <div>rotated</div>
</body>
</html>

live sample on jsfiddle here

So, I want to use jquery css() to read the rotation angle, but strangely, Opera 10.51 and FF 4.01 (and below) cannot read it, although the div is rendered correctly with a rotation effect.

This looks like a jQuery bug or a browser bug. Does anyone have a workaround for Opera/FF?

If you get an alert saying “Got it” then it works.

Thanks for the help.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Ok, I figured out the problem. The problem was on my code, that was not checking properly the return values from the css() getter.

    Before I had:

    if (value === undefined) {...

    The problem was fixed, by changing the above condition to:

    if (notDefined(value)) {...

    where notDefined is the function

    var notDefined = function(value) {
    return value == null || value == undefined || value == "" || value == "none";
}

    To be cross browser, I need to compare against all these 3 cases, not only undefined.

    You can see the update here

    It works for all the latest versions of IE (also IE7 and 8), Firefox, Safari, Chrome and Opera.

    • 0