Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Rotate a div using javascript

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.

like image 839
user2078845 Avatar asked Oct 01 '13 21:10

user2078845


People also ask

How do you rotate an element in JavaScript?

It supports inertia and stepwise rotation and is also compatible with touch devices. To rotate an element you can simply drag or swipe.


1 Answers

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>
like image 179
adeneo Avatar answered Oct 08 '22 19:10

adeneo