Skip to content

Dynamic Rotation in JavaScript

Rotate 30 Degrees

document.body.style.transform = 'rotate(30deg)';

Rotate 60 Degrees

document.body.style.transform = 'rotate(60deg)';

Rotate 90 Degrees

document.body.style.transform = 'rotate(90deg)';

Rotate 180 Degrees (up-side-down)

document.body.style.transform = 'rotate(180deg)';

Rotate 240 Degrees

document.body.style.transform = 'rotate(240deg)';

Rotate 360 Degrees (back to normal)

document.body.style.transform = 'rotate(360deg)';

Reset Rotation

document.body.style.transform = 'none';

Rotate with interval (30 Degrees at time)

var rotation = 0;
setInterval(function() {
  rotation += 30;
  document.body.style.transform = 'rotate(' + rotation + 'deg)';
}, 500);

Rotate with Interval (60 Degrees at time)

var rotation = 0;
setInterval(function() {
  rotation += 60;
  document.body.style.transform = 'rotate(' + rotation + 'deg)';
}, 500);

x## Rotate with interval (90 Degrees at time)"

var rotation = 0;
setInterval(function() {
  rotation += 90;
  document.body.style.transform = 'rotate(' + rotation + 'deg)';
}, 500);

Rotate with Interval (120 Degrees)

var rotation = 0;
setInterval(function() {
  rotation += 120;
  document.body.style.transform = 'rotate(' + rotation + 'deg)';
}, 500);

Animated rotate (30 Degrees)

var rotationInterval;
setTimeout(function() {
  rotationInterval = setInterval(function() {
    document.body.style['transition'] = 'transform 3s';
    document.body.style['transform'] = 'rotate(30deg)';
  }, 1000);
  setTimeout(function() {
    clearInterval(rotationInterval);
    document.body.style['transform'] = ''; // Reset the rotation
  }, 5000);
}, 1000);

Animated Rrotate (90 Degrees)

var rotationInterval;
setTimeout(function() {
  rotationInterval = setInterval(function() {
    document.body.style['transition'] = 'transform 3s';
    document.body.style['transform'] = 'rotate(90deg)';
  }, 1000);
  setTimeout(function() {
    clearInterval(rotationInterval);
    document.body.style['transform'] = ''; // Reset the rotation
  }, 5000);
}, 1000);

Animated rotate (180 Degrees)

var rotationInterval;
setTimeout(function() {
  rotationInterval = setInterval(function() {
    document.body.style['transition'] = 'transform 3s';
    document.body.style['transform'] = 'rotate(180deg)';
  }, 1000);
  setTimeout(function() {
    clearInterval(rotationInterval);
    document.body.style['transform'] = '';
  }, 5000);
}, 1000);

Animated rotate (360 Degrees)

var rotationInterval;
setTimeout(function() {
  rotationInterval = setInterval(function() {
    document.body.style['transition']

 = 'transform 3s';
    document.body.style['transform'] = 'rotate(360deg)';
  }, 1000);
  setTimeout(function() {
    clearInterval(rotationInterval);
    document.body.style['transform'] = ''; // Reset the rotation
  }, 5000);
}, 1000);