Moon?


#1

How do you get the moon to orbit the earth? I got this much already:
This below is CSS:
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%;

/* Play with these numbers to see what it does */
height: 200px;
width: 200px;
margin-top: -100px; 
margin-left: -100px;
border-color: orange;
border-width:0px;
border-style:dotted;
border-radius: 50%;

}

earth {

    position:absolute;
    top: 0;
    left: 50%;
    height: 50px;
    width: 50px;

    margin-left: -25px;
    margin-top: -25px;

    border-color: green;
    border-width:0px;
    border-style: solid;
    border-radius:50%;

}

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:white;
border-radius:50%;

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

}

moon{

position: absolute;
top: 50%;
left 50%;
width: 25px;
height: 25px;

margin-left:-25px;
margin-top:-25;

border-width: 0px;
border-style:solid;
border-color:gray;
border-radius: 50%;

}

moon-orbit{

position: absolute;
top:35%;
left:35%;
width:250px;
height: 250px;
margin-top:-250px;
margin-left:-250px;
border-width: 2px;
border-style: dotted;
border-color: white;
border-radius: 50%;
-webkit-animation: spin-right 10s linear infinite;
 -moz-animation: spin-right 10s linear infinite;
  -ms-animation: spin-right 10s linear infinite;
   -o-animation: spin-right 10s linear infinite;
      animation: spin-right 10s 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);
}
}
Here's the HTML:



<body>
    <!-- Right below is an image of the sun -->
    <img id="sun" src="http://goo.gl/PmbqZa">

    <!-- Insert the 'earth' on the next line -->
    <div id='earth-orbit'>
        <img id ="earth" src="http://goo.gl/41IWnf">
        <div id ='moon-orbit'>
            <img id ="moon" src ="http://www.nasa.gov/sites/default/files/thumbnails/image/as11-44-6667.jpg">
        </div>
    </div>
</body>

P.S: Does anyone know how to animate the sun? Kind of stuck on that part as well.


#2

Hi 1019538,

Your code isn't currently showing up properly. Please see this post on how to format it so it will be visible:

then post your properly formatted code, along with a link to the exercise you're on.
Thanks!