CSS animation with spin from center - css

Question

I am using css animations to try and get the green lines to spin around the red circle perfectly alined. I have linked to my fiddle where I have tried to get it working. any advice would be much appropriated. thanks!
[fiddle][1]
[1]: http://jsfiddle.net/3s07jbL4/3/
.badge {
position: relative;
width: 400px;
height:400px;
border-radius: 50%;
transform: rotate(-50deg);
background:red;
}
span {
font: 16px Monaco,monospace;
height: 240px;
position: absolute;
width: 34px;
left: 0px;
top: 0px;
transform-origin: center bottom 0px;
clip: rect(0px, 38px, 63px, 0px);
background:green;
}
span img {
width: 100%;
}
.day1 {
-webkit-transform: rotate(0deg);
-moz-transform: rotate(0deg);
-ms-transform: rotate(0deg);
-o-transform: rotate(0deg);
transform: rotate(0deg);
}
.day2 {
-webkit-transform: rotate(12deg);
-moz-transform: rotate(12deg);
-ms-transform: rotate(12deg);
-o-transform: rotate(12deg);
transform: rotate(12deg);
}
.day3 {
-webkit-transform: rotate(24deg);
-moz-transform: rotate(24deg);
-ms-transform: rotate(24deg);
-o-transform: rotate(24deg);
transform: rotate(24deg);
}
.day4 {
-webkit-transform: rotate(36deg);
-moz-transform: rotate(36deg);
-ms-transform: rotate(36deg);
-o-transform: rotate(36deg);
transform: rotate(36deg);
}
.day5 {
-webkit-transform: rotate(48deg);
-moz-transform: rotate(48deg);
-ms-transform: rotate(48deg);
-o-transform: rotate(48deg);
transform: rotate(48deg);
}
.day6 {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
.day7 {
-webkit-transform: rotate(72deg);
-moz-transform: rotate(72deg);
-ms-transform: rotate(72deg);
-o-transform: rotate(72deg);
transform: rotate(72deg);
}
.day8 {
-webkit-transform: rotate(84deg);
-moz-transform: rotate(84deg);
-ms-transform: rotate(84deg);
-o-transform: rotate(84deg);
transform: rotate(84deg);
}
.day9 {
-webkit-transform: rotate(96deg);
-moz-transform: rotate(96deg);
-ms-transform: rotate(96deg);
-o-transform: rotate(96deg);
transform: rotate(96deg);
}
.day10 {
-webkit-transform: rotate(108deg);
-moz-transform: rotate(108deg);
-ms-transform: rotate(108deg);
-o-transform: rotate(108deg);
transform: rotate(108deg);
}
.day11 {
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
-o-transform: rotate(120deg);
transform: rotate(120deg);
}
.day12 {
-webkit-transform: rotate(132deg);
-moz-transform: rotate(132deg);
-ms-transform: rotate(132deg);
-o-transform: rotate(132deg);
transform: rotate(132deg);
}
.day13 {
-webkit-transform: rotate(144deg);
-moz-transform: rotate(144deg);
-ms-transform: rotate(144deg);
-o-transform: rotate(144deg);
transform: rotate(144deg);
}
.day14 {
-webkit-transform: rotate(156deg);
-moz-transform: rotate(156deg);
-ms-transform: rotate(156deg);
-o-transform: rotate(156deg);
transform: rotate(156deg);
}
.day15 {
-webkit-transform: rotate(168deg);
-moz-transform: rotate(168deg);
-ms-transform: rotate(168deg);
-o-transform: rotate(168deg);
transform: rotate(168deg);
}
.day16 {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
.day17 {
-webkit-transform: rotate(192deg);
-moz-transform: rotate(192deg);
-ms-transform: rotate(192deg);
-o-transform: rotate(192deg);
transform: rotate(192deg);
}
.day18 {
-webkit-transform: rotate(204deg);
-moz-transform: rotate(204deg);
-ms-transform: rotate(204deg);
-o-transform: rotate(204deg);
transform: rotate(204deg);
}
.day19 {
-webkit-transform: rotate(216deg);
-moz-transform: rotate(216deg);
-ms-transform: rotate(216deg);
-o-transform: rotate(216deg);
transform: rotate(216deg);
}
.day20 {
-webkit-transform: rotate(228deg);
-moz-transform: rotate(228deg);
-ms-transform: rotate(228deg);
-o-transform: rotate(228deg);
transform: rotate(228deg);
}
.day21 {
-webkit-transform: rotate(240deg);
-moz-transform: rotate(240deg);
-ms-transform: rotate(240deg);
-o-transform: rotate(240deg);
transform: rotate(240deg);
}
.day22 {
-webkit-transform: rotate(252deg);
-moz-transform: rotate(252deg);
-ms-transform: rotate(252deg);
-o-transform: rotate(252deg);
transform: rotate(252deg);
}
.day23 {
-webkit-transform: rotate(264deg);
-moz-transform: rotate(264deg);
-ms-transform: rotate(264deg);
-o-transform: rotate(264deg);
transform: rotate(264deg);
}
.day24 {
-webkit-transform: rotate(276deg);
-moz-transform: rotate(276deg);
-ms-transform: rotate(276deg);
-o-transform: rotate(276deg);
transform: rotate(276deg);
}
.day25 {
-webkit-transform: rotate(288deg);
-moz-transform: rotate(288deg);
-ms-transform: rotate(288deg);
-o-transform: rotate(288deg);
transform: rotate(288deg);
}
.day26 {
-webkit-transform: rotate(300deg);
-moz-transform: rotate(300deg);
-ms-transform: rotate(300deg);
-o-transform: rotate(300deg);
transform: rotate(300deg);
}
.day27 {
-webkit-transform: rotate(312deg);
-moz-transform: rotate(312deg);
-ms-transform: rotate(312deg);
-o-transform: rotate(312deg);
transform: rotate(312deg);
}
.day28 {
-webkit-transform: rotate(324deg);
-moz-transform: rotate(324deg);
-ms-transform: rotate(324deg);
-o-transform: rotate(324deg);
transform: rotate(324deg);
}
.day29 {
-webkit-transform: rotate(336deg);
-moz-transform: rotate(336deg);
-ms-transform: rotate(336deg);
-o-transform: rotate(336deg);
transform: rotate(336deg);
}
.day30 {
-webkit-transform: rotate(348deg);
-moz-transform: rotate(348deg);
-ms-transform: rotate(348deg);
-o-transform: rotate(348deg);
transform: rotate(348deg);
}
.day31 {
-webkit-transform: rotate(360deg);
-moz-transform: rotate(360deg);
-ms-transform: rotate(360deg);
-o-transform: rotate(360deg);
transform: rotate(360deg);
}
.badge
{
-webkit-animation: spin1 2s infinite linear;
-moz-animation: spin1 2s infinite linear;
-o-animation: spin1 2s infinite linear;
-ms-animation: spin1 2s infinite linear;
animation: spin1 2s infinite linear;
width: 400px;
height: 400px;
}
#-webkit-keyframes spin1 {
0% { -webkit-transform: rotate(0deg);}
100% { -webkit-transform: rotate(360deg);}
}
#-moz-keyframes spin1 {
0% { -moz-transform: rotate(0deg); }
100% { -moz-transform: rotate(360deg);}
}
#-o-keyframes spin1 {
0% { -o-transform: rotate(0deg);}
100% { -o-transform: rotate(360deg);}
}
#-ms-keyframes spin1 {
0% { -ms-transform: rotate(0deg);}
100% { -ms-transform: rotate(360deg);}
}
#-keyframes spin1 {
0% { transform: rotate(0deg); }
100% { transform: rotate(360deg);}
}
<div id="spin">
<div class="badge">
<span class="day1">
1
</span>
<span class="day2">
1
</span>
<span class="day3">
1
</span>
<span class="day4">
1
</span>
<span class="day5">
1
</span>
<span class="day6">
1
</span>
<span class="day7">
1
</span>
<span class="day8">
1
</span>
<span class="day9">
1
</span>
<span class="day10">
1
</span>
<span class="day11">
1
</span>
<span class="day12">
1
</span>
<span class="day13">
1
</span>
<span class="day14">
1
</span>
<span class="day15">
1
</span>
<span class="day16">
1
</span>
<span class="day17">
1
</span>
<span class="day18">
1
</span>
<span class="day19">
1
</span>
<span class="day20">
1 </span>
<span class="day21">
1 </span>
<span class="day22">
1
</span>
<span class="day23">
1
</span>
<span class="day24">
1
</span>
<span class="day25">
1
</span>
<span class="day26">
1
</span>
<span class="day27">
1
</span>
<span class="day28">
1
</span>
<span class="day29">
1
</span>
<span class="day30">
1
</span>
</div>
</div>

Answer 1

To center all of the day elements horizontally, add left: 50% and margin-left: -17px to the span elements. (-17px is because they are 34px wide, and 17 is half of 34).
To center them vertically, add margin-top: -40px to them. This is because their heights are kind of arbitrary, and adding this will correct it.
http://jsfiddle.net/3s07jbL4/15/