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 · 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_

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_

<div class="rocket"><h1>SPIN ME</h1></div>_x000D_
<button class="toggle">I/0</button>

_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

User · 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   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   lt button id  button  gt rotate lt  button gt  x000D   lt br   gt  lt br   gt  x000D   lt div id  div  gt  lt  div gt  x000D   x000D   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   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   lt button id  button  gt rotate lt  button gt  x000D   lt br   gt  lt br   gt  x000D   lt div id  div  gt  lt  div gt  x000D   x000D   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   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   lt button id  button  gt rotate lt  button gt  x000D   lt br   gt  lt br   gt  x000D   lt div id  div  gt  lt  div gt  x000D   x000D   x000D

[javascript] Rotate a div using javascript

Examples related to javascript

Examples related to rotation

Examples related to jquery-transit