***

by ethertank

HTML

<span id="A">
<a><img src="http://placekitten.com/90/90"></a>
</span>


<span id="B">
    <a><img src="http://placekitten.com/90/90"></a>
</span>

CSS

img {
    -webkit-transition: -webkit-transform 0.25s linear;
       -moz-transition:    -moz-transform 0.25s linear;
         -o-transition:      -o-transform 0.25s linear;
            transition:         transform 0.25s linear;
}

#A img:hover {
    -webkit-transform: rotate(180deg);
       -moz-transform: rotate(180deg);
         -o-transform: rotate(180deg);
            transform: rotate(180deg);
}

#B img:hover {
    -webkit-transform: rotateY(180deg);
       -moz-transform: rotateY(180deg); /*not work*/
         -o-transform: rotateY(180deg); /*not work*/
            transform: rotateY(180deg);
}