This forum is now read-only. Please use our new forums! Go to forums

0 points
Submitted by Falchion7
almost 9 years

Finished Course, but earth won't orbit sun?

I completed the course, and I thought I followed all the instructions, but after finishing everything, the earth is just static. Probably a simple mistake. Here is my code:

HTML

**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;

}

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

#earth-orbit { position:absolute; top: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); } }

Can someone tell me what I did wrong?

Answer 5539706876b8fe68250000ea

0 votes

Permalink

I think just check your semicolons and I recognise that in your

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

And your

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

you put a extra } at the end. Try it!

points
Submitted by supercool12
almost 9 years

2 comments

Falchion7 almost 9 years

I just deleted those and the whole paragraph was full of errors. Each has two sets of { {, and should have } } to close

supercool12 almost 9 years

how about the semi colons?

Answer 55397a88e39efe98f800003c

0 votes

Permalink

What is with the } before the #earth { /* Style your earth */ position:absolute; top:0; left:50%; height:50px; width:50px; margin-left:-25px; margin-top:-25px; }

points
Submitted by supercool12
almost 9 years

1 comments

Falchion7 almost 9 years

it closes the { after #sun

Answer 553aba9bd3292f7744000405

0 votes

Permalink

I do not have a idea but check here for a hint

points
Submitted by supercool12
almost 9 years