Rotate a div using javascript

Question

I want to click on one div and rotate another div then when the firsts div is clicked again the other div rotates back to its original position.

I can reference this library if required http://ricostacruz.com/jquery.transit.

Answer 1

To rotate a DIV we can add some CSS that, well, rotates the DIV using CSS transform rotate.

To toggle the rotation we can keep a flag, a simple variable with a boolean value that tells us what way to rotate.

var rotated = false;  document.getElementById('button').onclick = function() {     var div = document.getElementById('div'),         deg = rotated ? 0 : 66;      div.style.webkitTransform = 'rotate('+deg+'deg)';      div.style.mozTransform    = 'rotate('+deg+'deg)';      div.style.msTransform     = 'rotate('+deg+'deg)';      div.style.oTransform      = 'rotate('+deg+'deg)';      div.style.transform       = 'rotate('+deg+'deg)';       rotated = !rotated; } 

var rotated = false;    document.getElementById('button').onclick = function() {      var div = document.getElementById('div'),          deg = rotated ? 0 : 66;        div.style.webkitTransform = 'rotate('+deg+'deg)';       div.style.mozTransform    = 'rotate('+deg+'deg)';       div.style.msTransform     = 'rotate('+deg+'deg)';       div.style.oTransform      = 'rotate('+deg+'deg)';       div.style.transform       = 'rotate('+deg+'deg)';             rotated = !rotated;  }

#div {      position:relative;       height: 200px;       width: 200px;       margin: 30px;      background: red;  }

<button id="button">rotate</button>  <br /><br />  <div id="div"></div>

To add some animation to the rotation all we have to do is add CSS transitions

div {     -webkit-transition: all 0.5s ease-in-out;     -moz-transition: all 0.5s ease-in-out;     -o-transition: all 0.5s ease-in-out;     transition: all 0.5s ease-in-out; } 

var rotated = false;    document.getElementById('button').onclick = function() {      var div = document.getElementById('div'),          deg = rotated ? 0 : 66;        div.style.webkitTransform = 'rotate('+deg+'deg)';       div.style.mozTransform    = 'rotate('+deg+'deg)';       div.style.msTransform     = 'rotate('+deg+'deg)';       div.style.oTransform      = 'rotate('+deg+'deg)';       div.style.transform       = 'rotate('+deg+'deg)';             rotated = !rotated;  }

#div {      position:relative;       height: 200px;       width: 200px;       margin: 30px;      background: red;      -webkit-transition: all 0.5s ease-in-out;      -moz-transition: all 0.5s ease-in-out;      -o-transition: all 0.5s ease-in-out;      transition: all 0.5s ease-in-out;  }

<button id="button">rotate</button>  <br /><br />  <div id="div"></div>

Another way to do it is using classes, and setting all the styles in a stylesheet, thus keeping them out of the javascript

document.getElementById('button').onclick = function() {     document.getElementById('div').classList.toggle('rotated'); } 

document.getElementById('button').onclick = function() {      document.getElementById('div').classList.toggle('rotated');  }

#div {      position:relative;       height: 200px;       width: 200px;       margin: 30px;      background: red;      -webkit-transition: all 0.5s ease-in-out;      -moz-transition: all 0.5s ease-in-out;      -o-transition: all 0.5s ease-in-out;      transition: all 0.5s ease-in-out;  }    #div.rotated {      -webkit-transform : rotate(66deg);       -moz-transform : rotate(66deg);       -ms-transform : rotate(66deg);       -o-transform : rotate(66deg);       transform : rotate(66deg);   }

<button id="button">rotate</button>  <br /><br />  <div id="div"></div>