Rotate using javascript

Question

I wanted to rotate a div. After a lot of research, there is no javascript to rotate a div without using the css transform, unless jquery library is used. The problem is I want to do a small rotation, and adding the library for that is not an option for me.Css transform does not work on IE.

With this example clock the minutes, hours and seconds rotate using javascript itself.

Can anyone help me get a div to rotate on IE7, and above using javascript itself without any additional libraries?

Nothing rotates on that clock, and it doesn't use just JavaScript. There is a separate div for every dot, and JS accesses the DOM to move each div that makes up the hand that is being moved. — Quentin
– Quentin, Commented Aug 5, 2011 at 7:04
@Fred I dare you to rotate something in ie8 and lower by using css3pie. css3pie.com/documentation/supported-css3-features — Joonas
– Joonas, Commented Aug 5, 2011 at 10:03

beatgammit · Accepted Answer · 2014-11-25 18:05:27Z

3

It's a bit late, but I have written some code to do this.

http://jsfiddle.net/rlemon/73DzT/

Object.prototype.rotate = function(d) {
    var s = "rotate(" + d + "deg)";
    if (this.style) { // regular DOM Object
        this.style.MozTransform = s
        this.style.WebkitTransform = s;
        this.style.OTransform = s;
        this.style.transform = s;
    } else if (this.css) { // JQuery Object
        this.css("-moz-transform", s);
        this.css("-webkit-transform", s);
        this.css("-o-transform", s);
        this.css("transform", s);
    }
    this.setAttribute("rotation", d);
}

can be used with regular objects or with JQuery objects. and stores an attribute called "rotation" to give you it's current rotation value. You can play around with this and see what you can come up with.

edited Nov 25, 2014 at 18:05

beatgammit

20.3k20 gold badges91 silver badges131 bronze badges

answered Sep 12, 2011 at 18:46

rlemon

17.7k14 gold badges95 silver badges126 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Event_Horizon Over a year ago

Now you just need to add IE filter support 3:D

ThatGuy · Accepted Answer · 2011-08-05 07:18:12Z

It's possible to do using raw CSS without javascript and jQuery:

$('#idElement').css({
    /*modern browsers*/
     '-moz-transform':'rotate(88deg)',
     '-webkit-transform':'rotate(88deg)',
     '-o-transform':'rotate(88deg)',
     '-ms-transform':'rotate(88deg)'
     /*IE:*/
     filter: progid:DXImageTransform.Microsoft.Matrix(sizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476), /* IE6,IE7 */
     -ms-filter: "progid:DXImageTransform.Microsoft.Matrix(SizingMethod='auto expand', M11=0.7071067811865476, M12=-0.7071067811865475, M21=0.7071067811865475, M22=0.7071067811865476)"; /* IE8 */
});

You can most definately change element attributes using simple javascript such as:

document.getElementById("idElement").setAttribute("-moz-transform", "rotate(88deg)");

Dzoki · Accepted Answer · 2011-08-05 07:09:09Z

0

I don't get it why not using jQuery when its lots easier solution?

Here is fast script i written

$(document).ready(function(){
    $('#element').easyRotate({
       degrees: 45
    });
});

For javascript you need to make pictures of your div and than rotate those pictures inside the div. I made simple example of doing that:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">

<html>
<head>
    <title></title>
</head>

<body>
    <div id="div1">
        <img name="img1" src="myimage1.jpg" id="img1">
        <br>
        <br>
        <input type="button" value="Rotate this image" onclick="rotate()">
    </div><script type="text/javascript">
var tally = 0;
    function rotate() {
    if (tally == 0) {
    document.images["img1"].src= "myimage2.jpg";
    tally = 1;
    return true;
    }
    else {
    document.images["img1"].src= "myimage1.jpg";
    tally = 0;
    return true;
    }
    }
    </script>
</body>
</html>

answered Aug 5, 2011 at 7:09

Dzoki

7374 silver badges14 bronze badges

3 Comments

slovaiwi Over a year ago

Dzoki, the target of website, majority of users are having GPRS, which offers very slow connectivity. My site on a whole is 50kb, on the client side and I do not want to use jQuery since the (minified, even)library is 35 kb. since just one rotation is required, adding jquery doesn't seem good.

slovaiwi Over a year ago

The javascript above flips images inside a div instead of rotating it. As far as i can think, i'll have to use Math library to change absolute positions of the div i have to rotate

Dzoki Over a year ago

you can use online library can't you? I'm not familiar with it. I will try to find another solution for it then, if you don't get better answer at that time.

Collectives™ on Stack Overflow

Rotate using javascript

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

1 Comment

Comments

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related