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

User · Accepted Answer

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;
}

_x000D_

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

_x000D_

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

_x000D_

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

_x000D_

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;
}

_x000D_

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

_x000D_

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

_x000D_

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

_x000D_

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');
}

_x000D_

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

_x000D_

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

_x000D_

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

_x000D_

User · Answer

I recently had to build something similar  You can check it out in the snippet below   The version I had to build uses the same button to start and stop the spinner  but you can manipulate to code if you have a button to start the spin and a different button to stop the spin  Basically  my code looks like this     Run Code Snippet   x000D   x000D  var rocket   document querySelector   rocket    x000D  var btn   document querySelector   toggle    x000D  var rotate   false  x000D  var runner  x000D  var degrees   0  x000D   x000D  function start    x000D      runner   setInterval function    x000D          degrees    x000D          rocket style webkitTransform    rotate     degrees    deg    x000D        50  x000D    x000D   x000D  function stop    x000D      clearInterval runner   x000D    x000D   x000D  btn addEventListener  click   function    x000D      if   rotate   x000D          rotate   true  x000D          start    x000D        else   x000D          rotate   false  x000D          stop    x000D        x000D     x000D  body   x000D    background   1e1e1e  x000D        x000D   x000D   rocket   x000D      width  150px  x000D      height  150px  x000D      margin  1em  x000D      border  3px dashed teal  x000D      border-radius  50   x000D      background-color  rgba 128 128 128 0 5   x000D      display  flex  x000D      justify-content  center  x000D      align-items  center  x000D      x000D     x000D     rocket h1   x000D      margin  0  x000D      padding  0  x000D      font-size   8em  x000D      color  skyblue  x000D      letter-spacing  1em  x000D      text-shadow  0 0 10px black  x000D      x000D     x000D     toggle   x000D      margin  10px  x000D      background   000  x000D      color  white  x000D      font-size  1em  x000D      padding   3em  x000D      border  2px solid red  x000D      outline  none  x000D      letter-spacing  3px  x000D      x000D   lt div class  rocket  gt  lt h1 gt SPIN ME lt  h1 gt  lt  div gt  x000D   lt button class  toggle  gt I 0 lt  button gt  x000D   x000D   x000D

User · Answer

Can be pretty easily done assuming you re using jQuery and css3   http   jsfiddle net S7JDU 8   HTML    lt div id  clicker  gt Click Here lt  div gt   lt div id  rotating  gt  lt  div gt    CSS    clicker        width  100px       height  100px       background-color  Green       rotating        width  100px       height  100px       background-color  Red       margin-top  50px       -webkit-transition  all 0 3s ease-in-out      -moz-transition  all 0 3s ease-in-out      -o-transition  all 0 3s ease-in-out      transition  all 0 3s ease-in-out      rotated        transform rotate 25deg        -webkit-transform rotate 25deg        -moz-transform rotate 25deg        -o-transform rotate 25deg        JS     document  ready function             clicker   click function                 rotating   toggleClass  rotated

[javascript] Rotate a div using javascript

Examples related to javascript

Examples related to rotation

Examples related to jquery-transit