JSFiddle - React, Tailwind, and code Playground
by Arun Unnikrishnan
HTML
<img src="http://images.wikia.com/logopedia/images/2/25/BMW_logo.png" id="logo" />
CSS
img {
max-width:200px;
position:absolute;
top:0;
right:0;
}
JavaScript
rotate = function(element,initial){
element = $(element);
rDeg = initial; //Initial angle
element.css({
'-webkit-transform': 'rotate('+rDeg+'deg)',
'-moz-transform': 'rotate('+rDeg+'deg)',
'-ms-transform': 'rotate('+rDeg+'deg)',
'-o-transform': 'rotate('+rDeg+'deg)',
'transform': 'rotate('+rDeg+'deg)'
});
// Animate rotation with a recursive call
timer = setTimeout(function() {
++rDeg; rotate('#logo',rDeg);
},5);
if(rDeg==-1){ clearTimeout(timer); moveLogo() }
}
rotate('#logo',-80);
moveLogo = function(){ $('#logo').animate({width:'20%'}, 1800);
}