img rotation transition

by toubia95

HTML

<img id="fond" src="https://gtoubiana.github.io/rotations/compass/www/assets/images/boussole01-fond.png">
<img id="aiguille" src="https://gtoubiana.github.io/rotations/compass/www/assets/images/boussole01-aiguille.png">

CSS

img {
  position: absolute;
  width: 100%;
  height: auto;
  transition: all 0.5s ease-in-out;
}

JavaScript

var width = window.innerWidth
|| document.documentElement.clientWidth
|| document.body.clientWidth;

var height = window.innerHeight
|| document.documentElement.clientHeight
|| document.body.clientHeight;

if (width > height) {
	$('img').css('width','auto');
  $('img').css('height','100%');
}

window.setInterval(function(){
	var rand = parseInt(Math.random()*360);
	$('#aiguille').css('transform','rotate('+rand+'deg)');
}, 500);