practice css_circular

<!DOCTYPE html>
<html>
<head>
<style>

.circle{
 width:200px;
 height:200px;
 border-radius:50%;
 position:relative;
 left:50px;
 top:50px;
}
.circle ul{
list-style-type:none;
}

.circle ul li{
 height:50px;
 width:50%;
 position:absolute;
 left:50%;
 top:37.5%; /* 41.5 = (100-((50/200)*100))/2 */
}
.circle ul li a{
 display:block;
 width:50px;
 height:50px;
 position:relative;
 left:-25%; /* 25=((50/100)/2)*100 */
 border-radius:50%;
 background-position:center;
 background-size:52px;
}

.circle ul li.s1{
 transform:rotateZ(0deg); 
 transform-origin:left;
}
.circle ul li.s2{
 transform:rotateZ(60deg); 
 transform-origin:left;
}
.circle ul li.s3{
 transform:rotateZ(120deg); 
 transform-origin:left;
}
.circle li.s4{
 transform:rotateZ(180deg); 
 transform-origin:left;
}
.circle li.s5{
 transform:rotateZ(240deg); 
 transform-origin:left;
}
.circle li.s6{
 transform:rotateZ(300deg); 
 transform-origin:left;
}

.circle:hover ul li a{
 left:50%; /* 50%=100%-(50px/100px)*100 */
 animation:Circuling 1 1s;
}

.circle:hover ul li a.share{
 left:-25%; 
 animation:none;
 cursor:pointer; 
}

@keyframes Circuling{
0%{
 left:-25%;
}
100%{
 left:50%;
}
}

</style>
</head>
<body>
<div class="circle">
 <ul>
  <li class="s1"><a href="" style="transform:rotateZ(0deg); background-image:url(twitter-icon.png);"></a></li>
  <li class="s2"><a href="" style="transform:rotateZ(-60deg); background-image:url(facebook-icon.png);"></a></li>
  <li class="s3"><a href="" style="transform:rotateZ(-120deg); background-image:url(google+-icon.png);"></a></li>
  <li class="s4"><a href="" style="transform:rotateZ(-180deg); background-image:url(twitter-icon.png);"></a></li>
  <li class="s5"><a href="" style="transform:rotateZ(-240deg); background-image:url(facebook-icon.png);"></a></li>
  <li class="s6"><a href="" style="transform:rotateZ(-300deg); background-image:url(google+-icon.png);"></a></li>
  <li><a class="share" style="background-image:url(share-icon.png);"></a></li>
 </ul>
 </div>
</body>
</html>

Share