Поворот div с помощью javascript

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

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

22
javascript jquery-transit rotation

2 ответов

чтобы повернуть 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>
38

можно довольно легко сделать, предполагая, что вы используете 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');
    });
});
5