Menú de círculos rotando CSS

dabblet.css

/* Menú de círculos rotando CSS */

ul.circulos { 
width: 100%;  
margin: 20px auto;  
text-align: center;
list-style-type: none;  
font:  bold 14px arial; 
text-transform: uppercase; 
}  
  
ul.circulos li {   
display: inline;  
margin: 0;
padding: 0;
}  
  
ul.circulos li a {  
display: inline-block;
text-decoration: none;  
color: white;  
background: black;  
padding: 5px;
width:120px;  
height:120px;  
-o-border-radius: 200px;
-moz-border-radius: 200px;  
-webkit-border-radius: 200px;  
-ms-border-radius: 200px;
border-radius: 200px;
}  
ul.circulos a span {  
position: relative;
top:40%;
padding: 5px;
text-align: center;
}  
ul.circulos a:hover {  
background: #990000;
}  


ul.circulos2 { 
width: 100%;  
margin: 20px auto;  
text-align: center;
list-style-type: none;  
font:  bold 12px arial; 
text-transform: uppercase; 
}  
  
ul.circulos2 li {   
display: inline;  
margin: 0;
padding: 0;
}  
  
ul.circulos2 li a {  
display: inline-block;
text-decoration: none;  
color: white;  
background: green;  
padding: 5px;
width:80px;  
height:80px;  
-o-border-radius: 200px;
-moz-border-radius: 200px;  
-webkit-border-radius: 200px;  
-ms-border-radius: 200px;
border-radius: 200px;
-o-transition:all .5s ease-out; 
-webkit-transition:all .5s ease-out; 
-moz-transition:all .5s ease-out; 
-ms-transition:all .5s ease-out; 
transition:all .5s ease-out; 
}  
ul.circulos2 a span {  
position: relative;
top:40%;
padding: 5px;
text-align: center;
}  
ul.circulos2 a:hover {  
background: limegreen;
-o-transform: rotate(360deg);
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
transform: rotate(360deg);
-o-transition:all .8s ease-out; 
-webkit-transition:all .8s ease-out; 
-moz-transition:all .8s ease-out; 
-ms-transition:all .8s ease-out; 
transition:all .8s ease-out; 
}  

dabblet.html

<!-- HTML -->

<ul class="circulos">
<li><a href="javascript:void;"><span>Inicio</span></a></li>
<li><a href="javascript:void;"><span>Galería</span></a></li>
<li><a href="javascript:void;"><span>Bio</span></a></li>
<li><a href="javascript:void;"><span>Contacto</span></a></li>
</ul>

<ul class="circulos2">
<li><a href="javascript:void;"><span>Inicio</span></a></li>
<li><a href="javascript:void;"><span>Galería</span></a></li>
<li><a href="javascript:void;"><span>Bio</span></a></li>
<li><a href="javascript:void;"><span>Contacto</span></a></li>
</ul>

settings.json

{"view":"separate","fontsize":"90","seethrough":"","prefixfree":"1","page":"all"}