円形のアイコンを円に挿入

Question

円形のアイコンホルダーを作成しようとしています。すべてが完璧に機能していますが、円を作成するためにすべてのアイコンを接続する円形の線を追加したいと考えています。ここ は、私がここで

iは、現在ここ

iは

<div class="three60_wrapper clearfix"> 


    <ul> 
     <li><img src="image url" alt="logo"></li> 
     <li><a href=""><img src="image url" alt="360 icon"></a> 
     </li> 
     <li><a href=""><img src="image url" alt="360 icon"></a> 
     </li> 
     <li><a href=""><img src="image url" alt="360 icon"></a> 
     </li> 
     <li><a href=""><img src="image url" alt="360 icon"></a> 
     </li> 
     <li><a href=""><img src="image url" alt="360 icon"></a> 
     </li> 
     <li><a href=""><img src="image url" alt="360 icon"></a> 
     </li> 
     <li><a href=""><img src="image url" alt="360 icon"></a> 
     </li> 


    </ul> 


</div> 


.three60_wrapper ul { 


    list-style-type: none; 
    padding: 0; position: relative; 

} 
.three60_wrapper li { 
    position: absolute; 
    -webkit-transition: all 2s linear; 
    -moz-transition: all 2s linear; 
    transition: all 2s linear; 
} 

.three60_wrapper li a{ display: block; 
} 
.three60_wrapper li img{ display: block; min-width: 130px; height: auto; max-width: 180px;} 




jQuery(function() { 

    var type = 1, //circle type - 1 whole, 0.5 half, 0.25 quarter 
    radius = '20em', //distance from center 
    start = -90, //shift start from 0 
    $elements = jQuery('.three60_wrapper ul li:not(:first-child)'), 
    numberOfElements = (type === 1) ? $elements.length : $elements.length - 1, //adj for even distro of elements when not full circle 
    slice = 360 * type/numberOfElements; 

$elements.each(function(i) { 
    var $self = jQuery(this), 
     rotate = slice * i + start, 
     rotateReverse = rotate * -1; 

    $self.css({ 
     'transform': 'rotate(' + rotate + 'deg) translate(' + radius + ') rotate(' + rotateReverse + 'deg)' 
    }); 
}); 


}); 

、それが基づいて1を使用していますコードです持っていますものです欲しいものである。この jsfiddle

Answer 1

これはほぼは、私はあなたが欲しいと思う何を取得します：

li:first-child { 
    border: medium solid red; 
    width: 24em; 
    height: 24em; 
    margin-left: -10em; 
    margin-top: -10em; 
    border-radius: 50%; 
} 

あなたは実際の寸法とより実験する必要があります。また、実際のアイコンが円の前にあるように、z-indexの値を追加する必要があります。

Answer 2

サークルを作成せず、既存のイメージのULをオーバーラップさせて、探しているものを解決する ために？