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.
Add a comment
|
3 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>3 Comments
user2078845
Perfect! Is there a way to add some easing to the rotation?
adeneo
jQuery's animate() will animate the rotation, and the solution above could also be done by simply swapping classes and using css transitions.
10 Replies
Thanks for not using jQuery :) most answers here do.
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>
Comments
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');
});
});
