CODEWITHSUNDEEP
javascriptcsshtmlrotator
Pravesh Singh
Pravesh Singh

Reputation: 324

How to rotate a div in opera browser

I want to rotate a div in 20 degrees in below opera 10.50 versions below is my Javascript code for rotate the div:

<script type="text/javascript">
    function rotator(value) {
        document.getElementById('divId').style.webkitTransform = "rotate(" + value + "deg)";
        document.getElementById('divId').style.msTransform = "rotate(" + value + "deg)";
        document.getElementById('divId').style.MozTransform = "rotate(" + value + "deg)";
        document.getElementById('divId').style.OTransform = "rotate(" + value + "deg)";
        document.getElementById('divId').style.transform = "rotate(" + value + "deg)";
        document.getElementById('span1').innerHTML = value + " deg";
    }
</script>

HTML Code:

    <body>
    <div id="divId" style="height: 150px; width: 150px background-color:red; border: 1px solid #000;">
        This is Rotator Div
    </div>
    <br />
    Rotate:
    <input type="range" min="-360" max="360" value="0" onchange="rotator(this.value)" /><br />
    Rotate Div in <span id="span1">Zero deg</span>
</body>

How can I resolve my problem?

Upvotes: -4

Views: 332

Answers (1)

user2019515
user2019515

Reputation: 4503

CSS rotate transforms are not supported in Opera versions below 10.5, that's why this JavaScript method of you doesn't work.

See: http://caniuse.com/#feat=transforms2d

What you can do is rotate your image in photoshop and then upload that image with a transparent background, but then the image would be static of course and I doubt that's what you desire.

Upvotes: 2

Related Questions