Box efeito rotativo v1

Bons dias, trazendo mais uma das minhas personalizações ,partilhas .
Box de icones redes sociais com efeito rotativo modelo 1...
A imagem acima mostra a box normal ,mas para ver como fica ao passar o mouse em cima veja aqui online:
ENTRE AQUI ...
Vamos em esquema no seu painél do blog e adicione um gadget html/javascript e cole meu código abaixo;

<style type="text/css">
.btefeitoicones{
list-style-type:none;
margin:0;
padding:0;
width: auto px;
height:auto px;  
 background:-webkit-gradient(linear, 80% 14%, 10% 21%, from(#000000), to(#40e0d0));border:1px solid #ff8f85;-moz-border-radius:5px;-webkit-border-radius:5px;border-radius:5px;    
}
.btefeitoicones li{
display:inline;
width: 45px;
height:45px;
}
.btefeitoicones li img{
width: 45px;
height: 45px;
border:0;
margin-right: -8px;
-moz-transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
-ms-transition: all 0.5s ease;
transition: all 0.5s ease;
z-index: 2;
}
.btefeitoicones li img:hover{
  -moz-transform: rotateX(160deg);
-webkit-transform: rotateX(160deg);
-o-transform: rotateX(160deg);
transform: rotateX(160deg);
}
</style>
<ul class="btefeitoicones">
<li><a href="seu link"><img src="http://i.imgur.com/CzNVGD3.png" title=" feed" /></a></li>
<li><a href="seu link"><img src="http://i.imgur.com/8NLfbSV.png" title="Facebook" /></a></li>
<li><a href="seu link"><img src="http://i.imgur.com/BqPEcXA.png" title="google+" /></a></li>
<li><a href="seu link"><img src="http://i.imgur.com/vsbDyYi.png" title="Twitter" /></a></li>
<li><a href="seu link"><img src="http://i.imgur.com/AhDjaHb.png" title="youtube" /></a></li>
</ul>

Notas: onde diz seu link vc coloca o link respetivo a cada rede social...
Créditos dos icones :  iconfinder
Foi mais uma partilha simples espero que seja útil até mais...

Box efeito rotativo v1

► 0

► box

► Cartita