This forum is now read-only. Please use our new forums at discuss.codecademy.com.

Sun, Earth, and Code Forum

View Course » View Exercise

72 points
F610e931d50baa11a2da90986c5a17aa?s=140&d=retro
Submitted by
Rehan Zuberi
over 3 years ago

How to add a moon orbiting around the Earth ?

Is there a way (most probably in css) to add a Moon to orbit around the Earth ?
I know it's a sort question but I hope for long answers.

Thank you !


2 votes

permalink

I've got it to work, here is my CSS code -

html, body {
    /* The universe takes up all available space */
    width: 100%;
    height: 100%;

    /* The universe is black */
    background-color: black;
}

#sun {
    position: absolute;
    /* Positions the top-left corner of the image to be *
    /* in the middle of the box */
    top: 50%;
    left: 50%;
  /*border-color: orange;
  border-width: 4px;
  border-style: solid;
  border-radius: 50%;
    box-shadow:0 0 64px yellow;*/

    /* Play with these numbers to see what it does */
    height: 200px;
    width: 200px;
    margin-top: -100px; 
    margin-left: -100px;
}

#earth {
    /* Style your earth */
    position: absolute;
    top: 0%;
    left: 50%;
    height:50px;
    width: 50px;
    margin-left: -25px;
    margin-top: -25px; 

}

#earth-moon {
     position: absolute;
     top: 8%;
    right: 0%;
    height:30px;
    width: 30px;
}

#earth-moon-orbit {
    position: absolute;
    top: -15%;
    right: 35%;
    width: 150px;
    height: 150px;


    border-width: 2px;
    border-style: dotted;
    border-color: grey;
    border-radius: 50%;


          -webkit-animation: spin-right 55s linear infinite;
     -moz-animation: spin-right 55s linear infinite;
      -ms-animation: spin-right 55s linear infinite;
       -o-animation: spin-right 55s linear infinite;
          animation: spin-right 55s linear infinite;
}
#earth-orbit {

    position: absolute;
    top: 50%;
    left: 50%;

    width: 500px;
    height: 500px;
    margin-top: -250px;
    margin-left: -250px;


    border-width: 2px;
    border-style: dotted;
    border-color: orange;
    border-radius: 50%;



      -webkit-animation: spin-right 25s linear infinite;
     -moz-animation: spin-right 25s linear infinite;
      -ms-animation: spin-right 25s linear infinite;
       -o-animation: spin-right 25s linear infinite;
          animation: spin-right 25s linear infinite;
}

@-webkit-keyframes spin-right {
  100% {
    -webkit-transform: rotate(360deg);
       -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
         -o-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes spin-right {
  100% {
    -webkit-transform: rotate(360deg);
       -moz-transform: rotate(360deg);
        -ms-transform: rotate(360deg);
         -o-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

153 points
5782bde48369661fdc000509_176093916
Submitted by
ND
about 3 years ago

3 Comments

5674c6dae39efec455000434_879409444 Zeke Y about 3 years ago

Hey Noah, if you format your code, it'll show up better --> http://www.codecademy.com/forum_questions/509b9e7c3feca80200001d40#response-509bc71d6d816a0200003251

5782bde48369661fdc000509_176093916 ND about 3 years ago

Thank you. :)

5674c6dae39efec455000434_879409444 Zeke Y about 3 years ago

You're welcome :-)


2 votes

permalink

Although you need to style the moon and the moon's orbit in CSS, the actual trick to getting it to revolve around the earth is done in HTML. In the tutorial, it had you create a div id for the sun, then within that div it had you add another div for the earth's orbit and within that the div for the earth, like this:

<div id="sun">
    <div id="earth-orbit">
         <div id="earth">
         </div>
    </div>
</div>

This causes the earth's orbit to center around the sun since the center of the earth's orbit is at the center of the sun, thus creating a perfect circle around the sun. You just need to repeat this with the moon so that the moon's orbit is centered around the earth. To do this, you need to nest the moon's orbit within the div class for the earth, that way the moon's orbit is always at the center of the earth even when it is revolving around the sun. Here is the example to what I am talking about as I'm sure this is way confusing.

<div id="sun">
    <div id="earth-orbit">
         <div id="earth">
              <div id="moon-orbit">
                   <div id="moon">
                   </div>
              </div>
         </div>
    </div>
</div>

CSS styling for the moon is similar to the Earth and Earth's orbit but with the Moon's orbit you do not use a left or top adjustment, like this:

#moon-orbit {
     position: absolute;
     top: 0;
     left: 0;
     // This is not the full code, just the positioning part of it //

I can provide further help if you need it but give this a try first and see if you can get it. It took me a few tries to figure it out but don't give up. Just look at the code and try to figure out how it is interpreting what you are seeing on screen. Hope you can understand everything I've explained but if not let me know.

565 points
52d5e0d052f863c2920002d2_958684365
Submitted by
Silas Jura
about 3 years ago


0 votes

permalink

Hi, I think you could do this by adding another <img> and setting it to orbit the earth. I can give it a go if you want.

2819 points
5674c6dae39efec455000434_879409444
Submitted by
Zeke Y
over 3 years ago