Skip to content

CSS Transform | Cheatsheet

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 120 Degrees

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

Rotate 180 Degrees

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

Rotate 240 Degrees

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

Rotate 360 Degrees

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

Reset Rotation

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

Rotate with Interval (30 Degrees)

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

Rotate with Interval (60 Degrees)

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

x## Rotate with Interval (90 Degrees)

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 Rotate (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);