环形UI导航控件

核心代码

// 核心代码 
ul li:nth-child(num) 
{ transform: rotate((num - 1) * 90deg / (totalNum - 1)) translateX(180px);}​ 
// 让每个子元素都旋转并且移动​

实例:

// 默认样式
.tool-item 
{   
    width: 50px;    
    height: 50px;    
    position: absolute;    
    background: red;    
    border-radius: 50%;    
    transition: opacity .3s linear, transform .3s;
}

body:hover {    
    ul li:nth-child(1) {        transform: rotate((1 - 1) * 90deg / (5- 1)) translateX(180px);    }    
    ul li:nth-child(2) {        transform: rotate((2 - 1) * 90deg / (5- 1)) translateX(180px);    }    
    ul li:nth-child(3) {        transform: rotate((3 - 1) * 90deg / (5- 1)) translateX(180px);    }    
    ul li:nth-child(4) {        transform: rotate((4 - 1) * 90deg / (5- 1)) translateX(180px);    }    
    ul li:nth-child(5) {        transform: rotate((5 - 1) * 90deg / (5- 1)) translateX(180px);    }}​