Plain JavaScript rotate

Question

I would like to rotate an object exactly as the fiddle: http://jsfiddle.net/nqC6T/ however, I do not have the JQuery library available in my project.

 var angle = 0;
    $(document).ready(function () {
        $('#rotate').click(function () {
            angle += 90;
            $('#div1').animate({ rotate: angle }, {
                step: function (now, fx) {
                    $(this).css('-webkit-transform', 'rotate(' + now + 'deg)');
                    $(this).css('-moz-transform', 'rotate(' + now + 'deg)');
                    $(this).css('transform', 'rotate(' + now + 'deg)');
                },
                duration: 3000
            }, 'linear');
        });
    });

Would this be possible in plain JavaScript?

Thanks!

Yes it's possible.

Ele
– Ele

2018-01-02 12:56:27 +00:00
Commented Jan 2, 2018 at 12:56 — Ele
– Ele, Commented Jan 2, 2018 at 12:56
You can do it with CSS3 Animations.

Mohammad Usman
– Mohammad Usman

2018-01-02 12:57:03 +00:00
Commented Jan 2, 2018 at 12:57 — Mohammad Usman
– Mohammad Usman, Commented Jan 2, 2018 at 12:57

Alec Smart · Accepted Answer · 2018-01-02 13:02:11Z

3

A plain Javascript based solution is as follows:

var obj = document.getElementById("div1");
var total = 100;
var current = 0;

setInterval(function(){ 

 if (current < total) {
      current += 1;
        obj.style.transform = 'rotate('+current+'deg)';
 }
}, 1);

This is just an example. You can definitely improve this code further. As mentioned by Mohammad, you can also use CSS3 based animations.

answered Jan 2, 2018 at 13:02

Alec Smart

96.2k39 gold badges124 silver badges187 bronze badges

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

Comments

score 0 · Accepted Answer · 2018-01-30 17:48:14Z

You could add a 'rate of speed' and 'initial rotate position' to the element you wish to rotate, by simply using a closure to automatically return a given rotational increase/decrease rate:

var division=document.getElementById("rotdiv");

function rotElem(startpos,rate){
  return function(mult){ 
  return division.style="transform:rotate("+ startpos+ mult*rate++ +"deg)";};
}
var rotelem = rotElem(0,1);
var atspeedof = setInterval(rotelem.bind(null),1000,10);

rotElem(0,1) You define optional start position '0' of the element before starting rotate and the self-increasing 'unit' of change return by the closure.

setInterval(rotelem.bind(null),1000,10) You call setInterval to run the closure at each second AND passing the value '10' as the multiplier for the rate speed. Changing the rightmost argument after the setInterval time, increases or decreases rotation.

var division = document.getElementById("rotdiv");

function rotElem(startpos, rate) {
  return function(mult) {
    return division.style = "transform:rotate(" + startpos + mult * rate++ + "deg)";
  };

}
var rotelem = rotElem(0, 1);
var atspeedof = setInterval(rotelem.bind(null), 500, 10);

#rotdiv {
  position: relative;
  margin: auto;
  top: 50px;
  width: 80px;
  height: 80px;
  background-color: gray;
}

<div id='rotdiv'>
</div>

Collectives™ on Stack Overflow

Plain JavaScript rotate

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related