我在关注 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>如您所见，月球和小行星正在撞击地球。我不知道为什么会这样，
我还为 transform origin 属性正确计算了边距和高度，但没有任何运气。任何帮助将不胜感激。
最佳答案
关于html - 围绕中心旋转嵌套元素，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/30527898/