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.
It supports inertia and stepwise rotation and is also compatible with touch devices. To rotate an element you can simply drag or swipe.
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>
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With