Поверните div, используя JavaScript

Question

Я хочу щелкнуть по одному элементу div и повернуть другой элемент div, а затем при повторном нажатии на элемент div, другой элемент div возвращается в исходное положение.

Я могу ссылаться на эту библиотеку, если требуется http://ricostacruz.com/jquery.transit.

Answer 1

Чтобы повернуть DIV, мы можем добавить немного CSS, который, ну, вращает DIV с помощью CSS transform 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>

Чтобы добавить анимацию к вращению, все, что нам нужно сделать, это добавить CSS-переходы.

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>

Еще один способ сделать это - использовать классы и установить все стили в таблице стилей, таким образом не допуская их в 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>

Answer 2

Мне недавно пришлось построить нечто подобное. Вы можете проверить это в приведенном ниже фрагменте.

Версия, которую мне пришлось создать, использует ту же кнопку для запуска и остановки счетчика, но вы можете манипулировать кодом, если у вас есть кнопка для запуска вращения и другая кнопка для остановки вращения

В основном мой код выглядит так...

Запустить фрагмент кода

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>

Answer 3

Это может быть легко сделано, если вы используете jQuery и css3:

http://jsfiddle.net/S7JDU/8/

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