var type = 1, //circle type - 1 whole, 0.5 half, 0.25 quarter radius = '12em', //distance from center start = -90, //shift start from 0 $elements = $('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 = $(this), rotate = slice * i + start, rotateReverse = rotate * -1; $self.css({ 'transform': 'rotate(' + rotate + 'deg) translate(' + radius + ') rotate(' + rotateReverse + 'deg)' }); });
<p> Inspired by this <a href="http://stackoverflow.com/questions/12813573/position-icons-into-circle" target="_blank">Stack Overflow</a> question. </p> <ul> <li>Center</li> <li>Item 1</li> <li>Item 2</li> <li>Item 3</li> <li>Item 4</li> <li>Item 5</li> <li>Item 6</li> <li>Item 7</li> <li>Item 8</li> </ul>
ul { position: relative; top: 200px; left: 200px; /*for example purposes only*/ list-style-type: none; margin: 0; padding: 0; } li { position: absolute; -webkit-transition: all 2s linear; -moz-transition: all 2s linear; transition: all 2s linear; }