<h1 class="redesSociais">Redes Sociais</h1>
<ul class="redesSociais">
  <li class="facebook"><a href="https://www.facebook.com/">Facebook</a></li>
  <li class="flikr"><a href="http://www.flickr.com/">Flikr</a></li>
  <li class="instagram"><a href="http://instagram.com/">Instagram</a></li>
  <li class="pinterest"><a href="https://pinterest.com/">Pinterest</a></li>
  <li class="behance"><a href="http://www.behance.net/">Behance</a></li>
</ul>

h1.redesSociais{
  display: none;
}
ul.redesSociais{
  padding-left: 0;
  position: fixed;
  width: 100px;
  height: 100px;
  left: 50%;
  top: 20%;
  margin-left: -50px;
  background-color: #fff;
}
ul.redesSociais li{
  list-style-position: inside;
  display: block;
  width: 100px;
  height: 100px;
  position: absolute;
  background-position: center;
  border-radius: 100px;
  box-shadow: 5px 5px 5px fade(black, 80%);
  transition: all 1s;
}
ul.redesSociais li a{
  display: block;
  width: 100px;
  height: 100px;
  text-indent: -100px;
  overflow: hidden;/*?*/
}
ul.redesSociais li.facebook{
  left: 0px;
  z-index: 2;
  background-image: url(http://icons.iconarchive.com/icons/yootheme/social-bookmark/128/social-facebook-button-blue-icon.png);
}
ul.redesSociais li.flikr{
  right: 20px;
  z-index: 1;
  background-image: url(http://icons.iconarchive.com/icons/yootheme/social-bookmark/128/social-flickr-button-icon.png);
}
ul.redesSociais li.instagram{
  right: 40px;
  z-index: 0;
  background-image: url(http://icons.iconarchive.com/icons/designbolts/free-instagram/128/Active-Instagram-4-icon.png);
}
ul.redesSociais li.pinterest{
  right: -20px;
  z-index: 1;
  background-image: url(http://icons.iconarchive.com/icons/martz90/circle/128/pinterest-icon.png);
}
ul.redesSociais li.behance{
  right: -40px;
  z-index: 0;
  background-image: url(http://icons.iconarchive.com/icons/emey87/social-button/128/behance-icon.png);
}

ul.redesSociais:hover li.facebook{
  right: 0;
  transform: rotate(0deg);
}
ul.redesSociais:hover li.flikr{
  right: 120px;
  transform: rotate(-360deg);
}
ul.redesSociais:hover li.instagram{
  right: 240px;
  transform: rotate(-360deg);
}
ul.redesSociais:hover li.pinterest{
  right: -120px;
  transform: rotate(360deg);
}
ul.redesSociais:hover li.behance{
  right: -240px;
  transform: rotate(360deg);
}