Hacemos una revisión profunda cada una de las reseñas en nuestra página web con el objetivo de mostrarte en todo momento la información con la mayor veracidad y certera.

Solución:

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

Para alternar la rotación, podemos mantener una bandera, una variable simple con un valor booleano que nos dice de qué manera 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;

rotate

Para agregar algo de 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;

rotate

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

rotate

Se puede hacer bastante fácilmente asumiendo que está usando jQuery y css3:

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

HTML:

Click Here

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

Recientemente tuve que construir algo similar. Puedes comprobarlo en el fragmento a continuación.

La versión que tuve que construir usa el mismo botón para iniciar y detener el giro, pero puedes manipular el código si tienes un botón para iniciar el giro y un botón diferente para detener el giro.

Básicamente, mi código se ve así…

Ejecutar fragmento de código

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;
  

SPIN ME
I/0

valoraciones y comentarios

Si eres capaz, tienes el poder dejar un post acerca de qué te ha impresionado de esta sección.

---

---

Utiliza Nuestro Buscador