Create a revolving effect using CSS3

I've shared a social widget and that widget have unique technique of creating a revolving effect in it.On hover the image revolves and shows the next image.After release of that widget,I got the question on how to make it,because many of us do not knows these simple technique.I am showing how to make it just work perfect with simple CSS3 snippet.

Demo

Hover Me

Instruction

The image which is before hover and after hover is a single image.On hover the background position just changes and because of CSS3 transition effect it looks like the images is just revolved.
The image is used is this one

Snippet 

CSS

#bloggerever
{
background: url('Image_URL') no-repeat;
background-position: 0px -50px;
display: block;
height: 50px;
moz-transition: all .3s ease-in-out;
o-transition: all .3s ease-in-out;
transition: all .3s ease-in-out;
webkit-transition: all .3s ease-in-out;
width: 50px;
}
#bloggerever:hover
{
background-position: 0 0;
}
#bloggerever a
{
display: block;
height: 50px;
text-indent: -9999px;
width: 50px;
}

The above CSS the element (bloggerever) have a width of 50px and height of 50px because of that it shows the portion of 50 by 50px but,the background-position is set to minus 50px on vetical position because the image have the coloured area at upper and black and white at lower.But on hover the background vertical position is changed to 0 thats the secret behind this.One more point that,if you want to add a link then a tag should have the same size as the image and should have text-indent of negative figure so that the text do not show in it,as I did above.

HTML

<li id="bloggerever">
<a href="LINK" target="_blank"></a>
</li>