dinamicamente - create element div javascript

Rota un div usando javascript

Question

Quiero hacer clic en un div y girar otro div, luego, cuando se hace clic nuevamente en el primer div, el otro div vuelve a su posición original.

Puedo consultar esta biblioteca si es necesario http://ricostacruz.com/jquery.transit .

Answer 1

Para rotar un DIV podemos agregar algo de CSS que, bueno, rota el DIV usando el giro de transformación de CSS.

Para alternar la rotación podemos mantener una bandera, una variable simple con un valor booleano que nos dice qué forma de rotar.

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>

Para agregar alguna animación a la rotación, todo lo que tenemos que hacer es agregar transiciones 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>

Otra forma de hacerlo es usando clases y configurando todos los estilos en una hoja de estilo, manteniéndolos fuera del 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

Se puede hacer fácilmente asumiendo que estás usando jQuery y 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'');
    });
});