JSFiddle - React, Tailwind, and code Playground

HTML

<div id="spin">
<ul>
<li class="facebook"><img src="http://www.ccsdesignhouse.com/three/wp-content/uploads/2012/09/facebook.png"/></li>
<li class="facebook"><img src="http://www.ccsdesignhouse.com/three/wp-content/uploads/2012/09/tweet.png" /></li>
<li class="facebook"><img src="http://www.ccsdesignhouse.com/three/wp-content/uploads/2012/09/linkedIn.png"/></li>
    <li class="facebook"><a href="http://www.google.com"><img src="http://www.ccsdesignhouse.com/three/wp-content/uploads/2012/09/pin.png" /></a></li>
</ul>
</div>

CSS

#spin ul {}
#spin li {display: inline; cursor: pointer;}
#spin li img {width: 30px; height: 30px;}

#spin li img:hover {
    -webkit-transform: rotate(-360deg);
    -moz-transform: rotate(-360deg);
    -ms-transform: rotate(-360deg);
    -o-transform: rotate(-360deg);
    transform: rotate(-360deg);
   
    -webkit-transition: all .8s ease;
    -moz-transition: all .8s ease-in-out;
    -o-transition: all .8s ease-in-out;
     transition: all .8s ease-in-out
}