A Pen by Malik Baba Aïssa.

index.html

<link href='http://fonts.googleapis.com/css?family=Open+Sans:300' rel='stylesheet' type='text/css'>

<div class="container">
  <h1>Placing elements on a circle using CSS3</h1>
  <p>Below is a pretty nifty method I use to place elements on circle. </p>
  
  <!-- BEGIN CIRCLE CODE -->
  
  <div class="wrapper">
  
  <div class="radius">
							
							    <a href='#' class='center'>O</a>
							    <a href='#' class='point deg0'><span>1</span></a>
							    <a href='#' class='point deg15'><span>2</span></a>
							    <a href='#' class='point deg30'><span>3</span></a>
							    <a href='#' class='point deg45'><span>4</span></a>
							    <a href='#' class='point deg60'><span>5</span></a>
							    <a href='#' class='point deg75'><span>6</span></a>
							    <a href='#' class='point deg90'><span>7</span></a>
							    <a href='#' class='point deg105'><span>8</span></a>
							    <a href='#' class='point deg120'><span>9</span></a>
							    <a href='#' class='point deg135'><span>1O</span></a>
							    <a href='#' class='point deg150'><span>11</span></a>
							    <a href='#' class='point deg165'><span>12</span></a>
							    <a href='#' class='point deg180'><span>13</span></a>
							    <a href='#' class='point deg195'><span>14</span></a>
							    <a href='#' class='point deg210'><span>15</span></a>
							    <a href='#' class='point deg225'><span>16</span></a>
							    <a href='#' class='point deg240'><span>17</span></a>
							    <a href='#' class='point deg255'><span>18</span></a>
							    <a href='#' class='point deg270'><span>19</span></a>
							    <a href='#' class='point deg285'><span>2O</span></a>
							    <a href='#' class='point deg300'><span>21</span></a>
							    <a href='#' class='point deg315'><span>22</span></a>
							    <a href='#' class='point deg330'><span>23</span></a>
							    <a href='#' class='point deg345'><span>24</span></a>
							    
							</div>
    
  </div>
  <!-- END CIRCLE CODE -->
  
  <h6>This method was originally described by: <a href="http://dabblet.com/gist/3864650" target="_blank">http://dabblet.com/gist/3864650</a></h6>
  
</div>

Placing-elements-on-a-circle.markdown

Placing elements on a circle

This is a quick method to place items on a circle.

I built a quick and dirty SASS Mixin to build the position and radius size for you. Just calculate how many items you want, add the mixin for every item and of you go!

I am convinced this can be exanded on, and made a lot better!

A Pen by Malik Baba Aïssa on CodePen.

License.

style.scss

@import "compass";
// A. THE MIXIN ++++++++++++++++++++++++++++++++++

  @mixin build-circle($degree, $radius){
			-webkit-transform: rotate($degree) translate($radius) rotate(-$degree);
			-moz-transform: rotate($degree) translate($radius) rotate(-$degree);
			-ms-transform: rotate($degree) translate($radius) rotate(-$degree);
			-o-transform: rotate($degree) translate($radius) rotate(-$degree);
			transform: rotate($degree) translate($radius) rotate(-$degree);
/*      animation: linear scalation 5s infinite;
     -webkit-animation: linear scalation 5s infinite;*/
		}

// A. END ++++++++++++++++++++++++++++++++++

// B. THE CIRCLE ++++++++++++++++++++++++++++++++++

  // B.1. Build your circle

  .wrapper {

   background: #c0392b;
   text-align: center;
   position: relative;
  
   height: 400px;
   width: 400px;
  
    margin: 0 auto;
  
    border-radius: 100%;

  } 

  .radius {
		  position:absolute;
      top:190px;
      left:190px;
      right:0;
      /*animation: rotation 5s;
      -webkit-animation: rotation 5s;*/
			
			.point, .center {
				display: block;
				position: absolute;
        width: 25px; 
				height: 25px;
				background: #fff;
				border-radius: 100%;
				text-align: center;
        color: #e74c3c;
        text-decoration: none;
        
    
    span {
      display:block;
      margin-top:2px;
    }
    
			}
			
		}
  // B.1. End

  // B.1. Plot your points ( I chose 24 items )
  .deg0 {
			@include build-circle(0deg, 150px);
		}
		
		.deg15 {
			@include build-circle(15deg, 150px);
		}
		
		.deg30 {
			@include build-circle(30deg, 150px);
		}
		
		.deg45 {
			@include build-circle(45deg, 150px);
		}
		
		.deg60 {
			@include build-circle(60deg, 150px);
		}
		
		.deg75 {
			@include build-circle(75deg, 150px);
		}
		
		.deg90 {
			@include build-circle(90deg, 150px);
		}
		
		.deg105 {
			@include build-circle(105deg, 150px);
		}
		
		.deg120 {
			@include build-circle(120deg, 150px);
		}
		
		.deg135 {
			@include build-circle(135deg, 150px);
		}
		
		.deg150 {
			@include build-circle(150deg, 150px);
		}
		
		.deg165 {
			@include build-circle(165deg, 150px);
		}
		
		.deg180 {
			@include build-circle(180deg, 150px);
		}
		
		.deg195 {
			@include build-circle(195deg, 150px);
		}
		
		.deg210 {
			@include build-circle(210deg, 150px);
		}
		
		.deg225 {
			@include build-circle(225deg, 150px);
		}
		
		.deg240 {
			@include build-circle(240deg, 150px);
		}
		
		.deg255 {
			@include build-circle(255deg, 150px);
		}
		
		.deg270 {
			@include build-circle(270deg, 150px);
		}
		
		.deg285 {
			@include build-circle(285deg, 150px);
		}
		
		.deg300 {
			@include build-circle(300deg, 150px);
		}
		
		.deg315 {
			@include build-circle(315deg, 150px);
		}
		
		.deg330 {
			@include build-circle(330deg, 150px);
		}
		
		.deg345 {
			@include build-circle(345deg, 150px);
		}
  // B.1. End

// B. END ++++++++++++++++++++++++++++++++++

// C. HOUSEKEEPING ++++++++++++++++++++++++++++++++++

body {
  background: #e74c3c;
}

.container {

  width: 940px;
  
  margin: 0 auto;

  color: #FFF;
  
  font-family: 'Open Sans', sans-serif;
  
  text-align: center;
  
}

h1 {
  text-transform: uppercase;
}


@-webkit-keyframes rotation { 
  0% {
    -webkit-transform-origin: 0 0;
		-webkit-transform: rotate(0deg) scale(1);
	}
  100% {
    -webkit-transform-origin: 0 0;
		-webkit-transform: rotate(360deg) scale(1);
  } 
}

@-webkit-keyframes circular { from {
										-webkit-transform: rotate(360deg)
										rotate(0deg);
							} to {
										-webkit-transform: rotate(-360deg)
										rotate(360deg);} 
							}

@-webkit-keyframes scalation { 
  0% {
		-webkit-transform: scale(0);
	}
  25% {-webkit-transform:scale(.8);}
  50% {-webkit-transform:scale(1.2);}
  75% {-webkit-transform:scale(.8);}
  100% {
		-webkit-transform: scale(0);
  } 
}

.wrapper {
  animation: linear circular 5s infinite;
  -webkit-animation: linear circular 5s infinite;
}

// C. END ++++++++++++++++++++++++++++++++++