Spinning Image

CSS Only

by Ken Watanabe

HTML

<div class="wrap">
<div class="world"><img src="http://upload.wikimedia.org/wikipedia/commons/thumb/e/ef/Erioll_world_2.svg/256px-Erioll_world_2.svg.png" /></div></div>

CSS

html, body {
    background: black;
}

div.wrap {
	width: 256px;
	height: 256px;
	background-color: transparent;

	position: absolute;
	top:0;
	bottom: 0;
	left: 0;
	right: 0;
	
	margin: auto;
}

.world
{
-webkit-animation: spin1 6s infinite linear;
-moz-animation: spin1 6s infinite linear;
-o-animation: spin1 6s infinite linear;
-ms-animation: spin1 6s infinite linear;
animation: spin1 6s infinite linear;    
    width: 256px;
    height: 256px;
    
}
 
@-webkit-keyframes spin1 {
0% { -webkit-transform: rotate(0deg);}
100% { -webkit-transform: rotate(360deg);}
}
@-moz-keyframes spin1 {
0% { -moz-transform: rotate(0deg); -moz-transform-origin: 50% 50%;}
100% { -moz-transform: rotate(360deg);}
}
@-o-keyframes spin1 {
0% { -o-transform: rotate(0deg);}
100% { -o-transform: rotate(360deg);}
}
@-ms-keyframes spin1 {
0% { -ms-transform: rotate(0deg);}
100% { -ms-transform: rotate(360deg);}
}
@-keyframes spin1 {
0% { transform: rotate(0deg); transform-origin: 50% 50%;}
100% { transform: rotate(360deg); transform-origin: 50% 50%;}
}