Efeito gotinha 360º

É um efeito que eu gosto muito. Vejam ele abaixo:
 
Para fazer esse efeito, coloque o código abaixo no seu css (entre <style> e </style>)
.sweetpoison11 {border: 2px solid #000; 
width: 60px; height:60px; opacity: .5; margin: 2px; -webkit-transition-duration: .80s;-moz-transition-duration: .80s;
-webkit-border-radius: 0px 100px 100px 100px;
border-radius: 0px 100px 100px 100px;} 
.sweetpoison11:hover {opacity: 1; -webkit-transition-duration: .80s;-moz-transition-duration: .80s; 
-moz-transform: scale(1) rotate(360deg) translateX(1px) translateY(1px); -webkit-transform: scale(1) rotate(360deg) translateX(1px) translateY(1px); -o-transform: scale(1) rotate(360deg) translateX(1px) translateY(1px); -ms-transform: scale(1) rotate(360deg) translateX(1px) translateY(1px); transform: scale(1) rotate(360deg) translateX(1px) translateY(1px); }
E o código abaixo onde você quer que o efeito apareça:

<a href="LINK DO SITE" target="_blank"><img src="http://i.imgur.com/OzZoVPn.png" class="sweetpoison11" /></a>
Por: Pâmela Sampaio em 16/05/14
Não copiem os códigos e nem o tutorial.
Se for útil de alguma forma, dê os créditos!
Facebook Twitter Pinterest Google+ Email Addthis