我跟随Codecademy网站完成了太阳系的动画，以下是链接：http://www.codecademy.com/courses/web-beginner-en-ymqg0/0/1。我已经让地球和月球转起来了，但是在经过多次尝试后，月球和小行星的轴没有正确显示。目前，这是我的代码：
body {
background: black;
}
#earth,
#moon,
#asteroid,
#sun {
position: absolute;
border-radius: 50%;
}
#earth {
height: 40px;
width: 40px;
background: deepskyblue;
box-shadow: 0 0 10px blue;
top: 50%;
left: 50%;
margin: -200px 0 0 -20px;
-webkit-animation: Erevolve 12s linear infinite;
animation: Erevolve 12s linear infinite;
transform-origin: 20px 200px;
z-index: 100;
}
#moon {
top: -30px;
left: 10px;
height: 10px;
width: 10px;
background: white;
-webkit-animation: Mrevolve 2s linear infinite;
animation: Mrevolve 2s linear infinite;
transform-origin: 5px 30px;
}
#asteroid {
top: -10px;
left: 0px;
height: 6px;
width: 6px;
background: #aaa;
-webkit-animation: Arevolve 2s linear infinite;
animation: Arevolve 2s linear infinite;
transform-origin: 3px 10px;
}
#sun {
height: 100px;
width: 100px;
background: gold;
box-shadow: 0 0 50px gold;
top: 50%;
left: 50%;
margin: -50px 0 0 -50px;
}
@-webkit-keyframes Erevolve {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes Erevolve {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes Mrevolve {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes Mrevolve {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@-webkit-keyframes Arevolve {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}
@keyframes Arevolve {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}<body>
<div id="earth">
<div id="moon">
<div id="asteroid">
</div>
</div>
</div>
<div id="sun"></div>
</body>正如你所看到的，月球和小行星正在撞向地球。我不知道为什么会发生这种情况。
我已经正确计算了变换原点属性的边距和高度，但没有成功。非常感谢您提供的任何帮助。