CSS 从中心旋转的动画

Question

我正在使用 css 动画来尝试让绿线围绕完美排列的红色圆圈旋转。我已经链接到我的 fiddle，我试图让它工作。任何建议都非常合适。谢谢！ [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

要使所有 day 元素水平居中，请将 left: 50% 和 margin-left: -17px 添加到 span 元素。（-17px是因为它们是34px宽，17是34的一半）。

要将它们垂直居中，请向它们添加 margin-top: -40px。这是因为他们的身高有点随意，添加这个会纠正它。

http://jsfiddle.net/3s07jbL4/15/

CSS 从中心旋转的动画

CSS animation with spin from center

html

css

animation