Rotate a div using javascript
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;}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;}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');}
Can be pretty easily done assuming you're using jQuery and css3:
HTML:
<div id="clicker">Click Here</div><div id="rotating"></div>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'); });});
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
var rocket = document.querySelector('.rocket');var btn = document.querySelector('.toggle');var rotate = false;var runner;var degrees = 0;function start(){ runner = setInterval(function(){ degrees++; rocket.style.webkitTransform = 'rotate(' + degrees + 'deg)'; },50)}function stop(){ clearInterval(runner);}btn.addEventListener('click', function(){ if (!rotate){ rotate = true; start(); } else { rotate = false; stop(); }})body { background: #1e1e1e;} .rocket { width: 150px; height: 150px; margin: 1em; border: 3px dashed teal; border-radius: 50%; background-color: rgba(128,128,128,0.5); display: flex; justify-content: center; align-items: center; } .rocket h1 { margin: 0; padding: 0; font-size: .8em; color: skyblue; letter-spacing: 1em; text-shadow: 0 0 10px black; } .toggle { margin: 10px; background: #000; color: white; font-size: 1em; padding: .3em; border: 2px solid red; outline: none; letter-spacing: 3px; }<div class="rocket"><h1>SPIN ME</h1></div><button class="toggle">I/0</button>