practice css_circular

<!DOCTYPE html>
<html>
<head>
<style>
.circle{
 width:200px;
 height:200px;
 border-radius:50%;
 position:relative;
 left:200px;
 top:200px;
 background-color:lightblue;
}
.circle ul{
 list-style-type:none;
}
.circle ul li{
 height:50px;
 width:50%;
 position:absolute;
 left:50%;
 top:37.5%; /* 37.5% = (100%-((50px/200px)*100))/2 */
 background-color:red;
}
.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;
 -webkit-transform:rotateZ(0deg); /* For safari */ 
 -webkit-transform-origin:left;  /* For safari */
}
.circle ul li.s2{
 transform:rotateZ(60deg); 
 transform-origin:left;
 -webkit-transform:rotateZ(60deg); /* For safari */
 -webkit-transform-origin:left; /* For safari */ 
}
.circle ul li.s3{
 transform:rotateZ(120deg); 
 transform-origin:left;
 -webkit-transform:rotateZ(120deg); /* For safari */
 -webkit-transform-origin:left; /* For safari */
}
.circle li.s4{
 transform:rotateZ(180deg); 
 transform-origin:left;
 -webkit-transform:rotateZ(180deg); /* For safari */
 -webkit-transform-origin:left; /* For safari */
}
.circle li.s5{
 transform:rotateZ(240deg); 
 transform-origin:left;
 -webkit-transform:rotateZ(240deg); /* For safari */
 -webkit-transform-origin:left; /* For safari */
}
.circle li.s6{
 transform:rotateZ(300deg); 
 transform-origin:left;
 -webkit-transform:rotateZ(300deg); /* For safari */
 -webkit-transform-origin:left; /* For safari */
} 
.circle:hover ul li a{
 left:50%; /* 50%=100%-(50px/100px)*100 */
 animation:Circuling 1 1s;
 -webkit-animation:Circuling 1 1s;
}
@keyframes Circuling{
0%{
 left:-25%;
}
100%{
 left:50%;
}
}
@-webkit-keyframes Circuling{
0%{
 left:-25%;
}
100%{
 left:50%;
}
}  
</style>
</head>
<body>
  
<div class="circle">
 <ul>
  <li class="s1"><a href="" style="background-image:url(twitter-icon.png);"></a></li>
  <li class="s2"><a href="" style="background-image:url(facebook-icon.png);"></a></li>
  <li class="s3"><a href="" style="background-image:url(google+-icon.png);"></a></li>
  <li class="s4"><a href="" style="background-image:url(twitter-icon.png);"></a></li>
  <li class="s5"><a href="" style="background-image:url(facebook-icon.png);"></a></li>
  <li class="s6"><a href="" style="background-image:url(google+-icon.png);"></a></li>
  <li><a style="background-image:url(share-icon.png); cursor:pointer;"></a></li>
 </ul>
 </div>

</body>
</html>

Share