CODEWITHSUNDEEP
javascriptloopscssrotation
Michael
Michael

Reputation: 73

change rotation of object with JS and CSS in a loop

I'm trying to make an image change its rotation between 2 position in an infinite loop. these are the 2 positions I have:

logo.style.webkitTransform = "rotate(3deg)"
logo.style.webkitTransform = "rotate(-3deg)"

Could someone help me with creating a delay and putting it into a loop. so far all my efforts didn't work. (I was trying using while for the loop + setTimeout)

or is there a better way to do it?

thanks in advance

Upvotes: 1

Views: 2690

Answers (2)

Jordizle
Jordizle

Reputation: 252

You could put them into a setInterval() JavaScript function:

var currentDeg = 3;

function changeRotation(deg){
    logo.style.webkitTransform = "rotate("+deg+"deg)";
    currentDeg = deg;
}

function setDeg(){
  if(currentDeg == 3){
    changeRotation(-3);
  } else {
    changeRotation(3);
  }
}

setInterval(setDeg(), 500);

HTH

Upvotes: 0

slash197
slash197

Reputation: 9034

Give this a try, see if it works

var dir = false;

setInterval(function(){
    (dir == false) ? logo.style.webkitTransform = "rotate(3deg)" : logo.style.webkitTransform = "rotate(-3deg)";
    dir = !dir;
}, 2000);

Upvotes: 1

Related Questions