問題描述

我想單擊一個 div 并旋轉另一個 div，然后當再次單擊第一個 div 時，另一個 div 會旋轉回原來的位置.

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.

如果需要，我可以參考這個庫http://ricostacruz.com/jquery.transit.

I can reference this library if required http://ricostacruz.com/jquery.transit.

推薦答案

要旋轉 DIV，我們可以添加一些 CSS，使用 CSS transform rotate 旋轉 DIV.

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>

要為旋轉添加一些動畫，我們所要做的就是添加 CSS 過渡

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>

另一種方法是使用類，并在樣式表中設置所有樣式，從而將它們排除在 javascript 之外

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>

這篇關于使用 javascript 旋轉 div的文章就介紹到這了，希望我們推薦的答案對大家有所幫助，也希望大家多多支持html5模板網！