Rotate Elements

by Wolf Wortmann

HTML

<div id="test">Hello world</div>

CSS

#test{
    background: blue;
    width: 50px;
    position: absolute;
    top: 50px;
    left: 100px;
    /*transform: rotate(720deg);
   
    webkit-transition: all 500ms cubic-bezier(0.620, 0, 0.485, 1); /* older webkit */
/*-webkit-transition: all 500ms cubic-bezier(0.620, -0.600, 0.485, 1.650);
   -moz-transition: all 500ms cubic-bezier(0.620, -0.900, 0.485, 1.950)0s;
     -o-transition: all 500ms cubic-bezier(0.620, -0.600, 0.485, 1.650);
        transition: all 500ms cubic-bezier(0.620, -0.900, 0.485, 1.950)0s; /* custom */
  transition: transform 4s cubic-bezier(1, -0.53, 0.405, 1.425) 0s,left 4s cubic-bezier(1, -0.53, 0.405, 1.425) 0s;
        padding: 5px;
}

JavaScript

function initBlink()
{
    var state = false;
    setInterval(function()
        {
            state = !state;
            var left = (state?'300px':'100px');
            var rot = (state?'rotate(-360deg)':'rotate(360deg)');
            document.getElementById('test').style.left = left;
          document.getElementById('test').style.transform = rot;

        }, 5000);
}
        
initBlink()