Rotating nest around center
I made this solar system animation following the following codecademy site: http://www.codecademy.com/courses/web-beginner-en-ymqg0/0/1
I was able to get the Earth and Moon to rotate, but after many trials, the axis of the Moon and the astroid did not start properly. currently this is my code:
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>
as you can see the moon and asteroid are crashing into the ground. I don't know why this is happening,
I also calculated the margin and height correctly for the transform origin property, with no luck. Any help would be greatly appreciated.
+3
source to share
2 answers
Fixed. http://jsbin.com/vemalo/1/
The margins are top
slightly lower.
Changes here https://www.diffchecker.com/3mdga45r
+2
source to share
#moon {
top: -40px;
left: 10px;
height: 10px;
width: 10px;
background: white;
-webkit-animation: Mrevolve 2s linear infinite;
animation: Mrevolve 2s linear infinite;
}
#asteroid {
top: -20px;
left: 0px;
height: 6px;
width: 6px;
background: #aaa;
-webkit-animation: Arevolve 2s linear infinite;
animation: Arevolve 2s linear infinite;
transform-origin: 5px;
overflow:none;
}
+1
source to share