#CODEPEN #WIDGET #SCSS: Social Switchbook. Pretty simple draft with transform rotate. FontAwesome for icons.

style.scss

@import "compass";
@import url(http://fonts.googleapis.com/css?family=Ubuntu);

* { box-sizing: border-box; }

body { 
  overflow: hidden;
   background:#c6c6c6;
  -webkit-font-smoothing: antialiased;
} 

.wrapper ul {
 	position: absolute;
  left: 45%;
  top: 15%;
}

.wrapper li {
 	width: 150px;
  height: 200px;
  margin: 10px;
  float: left;
  
  border-radius: 10px; 
  border:1px solid rgba(0,0,0,0.2);
  
  text-align: center;
  color: rgba(255,255,255,0.8);
  font-family: 'Ubuntu', "HelveticaNeue-Light","Helvetica Neue Light","Helvetica Neue",Helvetica,Arial,"Lucida Grande",sans-serif;
  font-size: 23px; 
  font-weight: bold;
  
  box-shadow: 0 0 5px rgba(0,0,0,0.3), inset 0 100px 100px rgba(255,255,255,0.1);
  position: absolute;
  transform-origin: 90% 92%;
  
  transition: all 0.3s ease-out;
  cursor: pointer;
}

.wrapper li:last-of-type:after {
 	content: "";
  position: absolute;
  left: 90%;
  top: 92%; 
  border-radius: 50%;
  width: 20px;
  height: 20px;
  background: white;
  margin: -10px 0 0 -10px;
  box-shadow:
    inset 0 1px 1px white,
    inset 0 -5px 3px #dddcdb,
    0 0 10px rgba(0,0,0,0.2);
}

.wrapper li:last-of-type:before {
 	content: "";
  position: absolute;
  right: 5px; 
  bottom: 14px;
  width: 19px;
  height: 2px;
  background: rgba(0,0,0,0.1); 
  z-index: 2;
}

.wrapper i {
  font-size: 60px;
  color: rgba(0,0,0,0.6);
	text-shadow: 0 1px 0 rgba(255,255,255,0.2);
  display: block;
  margin: 0 auto;
  padding-top: 40px;
}

.wrapper span {
 	text-shadow: 0 -1px 0 rgba(0,0,0,0.3);
}


.facebook { 
  background: #3b5998; 
  transform: rotate(-20deg);
}

.github { 
  background: #4183c4; 
  transform: rotate(-10deg);
}

.twitter { 
  background: #00a0d1;
  transform: rotate(00deg);
}

.linkedin { 
  background: #0e76a8; 
  transform: rotate(10deg);
}

.pinterest { 
  background: #910101;
  transform: rotate(20deg);
}

.googleplus { 
  background: #db4a39;
  transform: rotate(30deg); 
}

li:hover ~ li { 
  transform: rotate(120deg);
}

switchbook.html

<!-- Credit: http://codepen.io/HugoGiraudel/pen/lDuBK -->
<div class="wrapper">
<ul class="deck">
  <li class="facebook">
    <i class="icon-facebook"></i>
    <span>Facebook</span>
  </li>
  <li class="github">
    <i class="icon-github"></i>
    <span>GitHub</span>
  </li>
  <li class="twitter">
    <i class="icon-twitter"></i>
    <span>Twitter</span>
  </li>
  <li class="linkedin">
    <i class="icon-linkedin"></i>
    <span>LinkedIn</span>
  </li>
  <li class="pinterest">
    <i class="icon-pinterest"></i>
    <span>Pinterest</span>
  </li>
  <li class="googleplus">
    <i class="icon-google-plus"></i>
    <span>Google+</span>
  </li>
  </ul>
</div>