therebelrobot/Cool Rotating Gif Effect

## Cool Rotating Gif Effect
from http://cssdeck.com/labs/rotation-background-experiment

<!-- For only the image effect, only .outerGif and .innerGif are necessary -->
<!-- Sadly for javascript purposes we need a div within innerGif (CSS animation version doesn't need this, it can use a pseudo-element instead) -->
<body>
<!-- CSS animation -->
<div class='outerGif cssAnim'>
  <div class='innerGif'><div class='image'></div></div>
  <div class='overlay'><div class='image'></div></div>
</div>

<!-- With JS interaction. This is interesting when made full page -->
<div class='outerGif jsFollow'>
  <div class='innerGif'><div class='image'></div></div>
  <div class='overlay'><div class='image'></div></div>
</div>
</body>


<head>
<script type="text/javascript">
window.onload=function(){
var outerGifs = document.querySelectorAll('.jsFollow'),
    innerGifs = document.querySelectorAll('.jsFollow > .innerGif'),
    innerGifImages = document.querySelectorAll('.jsFollow > .innerGif > .image');
window.onmousemove = rotateElems;
function rotateElems(e) {
  var mouseX = e.pageX,
      mouseY = e.pageY;
  for(var i=0; i < innerGifs.length; i++) {
    var outerGif = outerGifs[i],
        innerGif = innerGifs[i],
        innerGifImage = innerGifImages[i],
        centerX = outerGif.offsetLeft + (outerGif.clientWidth / 2),
        centerY = outerGif.offsetTop + (outerGif.clientHeight / 2),
        degree = Math.atan2(mouseX - centerX, - (mouseY - centerY) )*(180/Math.PI);
    innerGif.style.webkitTransform = "rotate(" + degree + "deg)";
    innerGif.style.transform = "rotate(" + degree + "deg)";
    degree = -degree;
    innerGifImage.style.webkitTransform = "rotate(" + degree + "deg)";
    innerGifImage.style.transform = "rotate(" + degree + "deg)";
  }
}
}
</script></head>

html, body { height:100%; margin:0; padding:0; }
.outerGif {
  margin-top:50px;
  display:inline-block;
  position:relative;
  background: url(http://25.media.tumblr.com/tumblr_md91o3v2o21rdi9rjo1_500.gif);
  border-radius:50%;
  background-size:cover;
  width:300px; height:300px;
  overflow:hidden;
  /* Fix webkit rendering bug */
  -webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
}
.innerGif {
  position:absolute;
  left:-25%; bottom:50%;
  width:150%; height:50%;
  transform-origin:bottom center;
  overflow:hidden;
}
.innerGif .image {
  top:0%;
  height:200%; width:100%;
  background: url(http://25.media.tumblr.com/tumblr_mayd2coRwu1rhy8q9o1_500.gif) center center;
  background-size:cover;
}
.overlay {
  position:absolute;
  top:50%; left:50%;
  margin-top:-75px; margin-left:-75px;
  width:150px; height:150px;
  background:white;
  border-radius:50%;
}
.overlay:before {
  content:''; position:absolute;
  width:170%; height:170%;
  border-radius:50%;
  margin-top:-68px; margin-left:-68px;
  border:15px solid white;
}
.overlay .image {
  position:absolute;
  top:60%; left:50%;
  width:70px; height:70px;
  overflow:hidden;
  background:url(http://25.media.tumblr.com/tumblr_ma235cIYyx1rzygcio1_500.gif) center 42%;
  margin-top:-35px; margin-left:-35px;
}
.overlay .image:before {
  content:''; position:absolute;
  left:-80%;
  height:120%; width:80%;
  background:white;
  transform-origin:top right;
  transform:rotate(-33deg);
}
.overlay .image:after {
  content:''; position:absolute;
  right:-80%;
  height:120%; width:80%;
  background:white;
  transform-origin:top left;
  transform:rotate(33deg);
}

.cssAnim { left:15%; }
.jsFollow { left:25%; }
.cssAnim .innerGif { animation:elem 5s infinite; }
.cssAnim .innerGif .image { animation:inner 5s infinite; }

@keyframes elem {
  30% { transform:rotate(-50deg); }
  70% { transform:rotate(180deg); }
}
@keyframes inner {
  30% { transform:rotate(50deg); }
  70% { transform:rotate(-180deg); }
}
	from http://cssdeck.com/labs/rotation-background-experiment

	<!-- For only the image effect, only .outerGif and .innerGif are necessary -->
	<!-- Sadly for javascript purposes we need a div within innerGif (CSS animation version doesn't need this, it can use a pseudo-element instead) -->
	<body>
	<!-- CSS animation -->
	<div class='outerGif cssAnim'>
	<div class='innerGif'><div class='image'></div></div>
	<div class='overlay'><div class='image'></div></div>
	</div>

	<!-- With JS interaction. This is interesting when made full page -->
	<div class='outerGif jsFollow'>
	<div class='innerGif'><div class='image'></div></div>
	<div class='overlay'><div class='image'></div></div>
	</div>
	</body>




	<head>
	<script type="text/javascript">
	window.onload=function(){
	var outerGifs = document.querySelectorAll('.jsFollow'),
	innerGifs = document.querySelectorAll('.jsFollow > .innerGif'),
	innerGifImages = document.querySelectorAll('.jsFollow > .innerGif > .image');
	window.onmousemove = rotateElems;
	function rotateElems(e) {
	var mouseX = e.pageX,
	mouseY = e.pageY;
	for(var i=0; i < innerGifs.length; i++) {
	var outerGif = outerGifs[i],
	innerGif = innerGifs[i],
	innerGifImage = innerGifImages[i],
	centerX = outerGif.offsetLeft + (outerGif.clientWidth / 2),
	centerY = outerGif.offsetTop + (outerGif.clientHeight / 2),
	degree = Math.atan2(mouseX - centerX, - (mouseY - centerY) )*(180/Math.PI);
	innerGif.style.webkitTransform = "rotate(" + degree + "deg)";
	innerGif.style.transform = "rotate(" + degree + "deg)";
	degree = -degree;
	innerGifImage.style.webkitTransform = "rotate(" + degree + "deg)";
	innerGifImage.style.transform = "rotate(" + degree + "deg)";
	}
	}
	}
	</script></head>

	html, body { height:100%; margin:0; padding:0; }
	.outerGif {
	margin-top:50px;
	display:inline-block;
	position:relative;
	background: url(http://25.media.tumblr.com/tumblr_md91o3v2o21rdi9rjo1_500.gif);
	border-radius:50%;
	background-size:cover;
	width:300px; height:300px;
	overflow:hidden;
	/* Fix webkit rendering bug */
	-webkit-mask-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAIAAACQd1PeAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAA5JREFUeNpiYGBgAAgwAAAEAAGbA+oJAAAAAElFTkSuQmCC);
	}
	.innerGif {
	position:absolute;
	left:-25%; bottom:50%;
	width:150%; height:50%;
	transform-origin:bottom center;
	overflow:hidden;
	}
	.innerGif .image {
	top:0%;
	height:200%; width:100%;
	background: url(http://25.media.tumblr.com/tumblr_mayd2coRwu1rhy8q9o1_500.gif) center center;
	background-size:cover;
	}
	.overlay {
	position:absolute;
	top:50%; left:50%;
	margin-top:-75px; margin-left:-75px;
	width:150px; height:150px;
	background:white;
	border-radius:50%;
	}
	.overlay:before {
	content:''; position:absolute;
	width:170%; height:170%;
	border-radius:50%;
	margin-top:-68px; margin-left:-68px;
	border:15px solid white;
	}
	.overlay .image {
	position:absolute;
	top:60%; left:50%;
	width:70px; height:70px;
	overflow:hidden;
	background:url(http://25.media.tumblr.com/tumblr_ma235cIYyx1rzygcio1_500.gif) center 42%;
	margin-top:-35px; margin-left:-35px;
	}
	.overlay .image:before {
	content:''; position:absolute;
	left:-80%;
	height:120%; width:80%;
	background:white;
	transform-origin:top right;
	transform:rotate(-33deg);
	}
	.overlay .image:after {
	content:''; position:absolute;
	right:-80%;
	height:120%; width:80%;
	background:white;
	transform-origin:top left;
	transform:rotate(33deg);
	}

	.cssAnim { left:15%; }
	.jsFollow { left:25%; }
	.cssAnim .innerGif { animation:elem 5s infinite; }
	.cssAnim .innerGif .image { animation:inner 5s infinite; }

	@keyframes elem {
	30% { transform:rotate(-50deg); }
	70% { transform:rotate(180deg); }
	}
	@keyframes inner {
	30% { transform:rotate(50deg); }
	70% { transform:rotate(-180deg); }
	}