Question

我正在使用css动画试图让绿线在红圈内完美旋转。我已经联系到我的小提琴，我试图让它工作。任何建议都会被挪用。谢谢！ [小提琴] [1]

 [1]: http://jsfiddle.net/3s07jbL4/3/

＆＃13;

 
.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);}
}

＆＃13;

<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>

＆＃13;

Answer 1

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

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

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

从中心旋转的CSS动画

1 个答案: