CSS Spin Control

by spectre

HTML

<ul>
    <li>Item 0</li>
    <li>Item 1</li>
    <li>Item 2</li>
    <li>Item 3</li>
    <li>Item 4</li>  
</ul>

CSS

body {
    padding: 150px;
}

ul {
    position: relative;
    margin: 0px; padding: 0px;
    width: 50px; height: 50px;
    border-radius: 25px;
    list-style: none;
    -webkit-animation-duration: 1s; 
    -webkit-animation-name: unspin;
}

ul:hover {
    margin: -90px; padding: 90px;
    border-radius: 120px;
    -webkit-animation-duration: 1s; 
    -webkit-animation-name: spin;
}

@-webkit-keyframes unspin {
    from {
        margin: -90px; padding: 90px; 
        -webkit-transform: rotate(0deg); 
    }
    to {
        margin: 0px; padding: 0px; 
        -webkit-transform: rotate(360deg); 
    }
}

@-webkit-keyframes spin {
    from {
        margin: 0px; padding: 0px; 
        -webkit-transform: rotate(0deg); 
    }
    to {
        margin: -90px; padding: 90px; 
        -webkit-transform: rotate(360deg); 
    }
}

li {
    position: absolute;
    margin: 0px; padding: 10px;
    width: 30px; height: 30px;
    border: 1px solid #202020;
    background-color: #101010;
    /*box-shadow: 1px 1px 4px 4px #d0d0d0;*/
    color: #d0d0d0;
    border-radius: 25px; 
    text-align: center;
    cursor: pointer;
}

li:nth-child(1) { z-index: 101;}
li:nth-child(2) { left: 0px; }
li:nth-child(3) { top: 0px; }
li:nth-child(4) { right: 0px; }
li:nth-child(5) { bottom: 0px; }