Why wont my earth orbit?!


#1

i copied the code so perfectly! I get the check marks and stuff but it dosen't orbit :confused:


#2

Hi Liv4laps,

Would you mind posting and formatting your code so we can look through it to find the problem?
You can format code by selecting it all while in the post editor, and pressing Ctrl/Cmd + K, or by adding a new line and three backticks (`) before and after your code, like this:


```
<code> will show up properly here
```

Thanks :)


#6

I'm in the same boat as liv4laps... Here's my code below:

html, body {
    width: 100%;
    height: 100%;
    
    background-color: black;
}

#sun {
    position: absolute;
    top: 50%;
    left: 50%;
    
    height: 200px;
    width: 200px;
    margin-top: -100px; 
    margin-left: -100px;
    
    border-color: orange;
    border-width: 2px;
    border-style: solid;
    border-radius: 50%;
    
    box-shadow: 0 0 64px red;
}

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

#earth-orbit {
    position: absolute;
    top: 50%
    left: 50%;
    
    width: 500px;
    height: 500px
    margin-top: -25px;
    margin-left: -25px;
    
    border-width: 2px:
    border-style: dotted;
    border-color: white;
    border-radius: 50%;

}

@-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);
  }
}

#earth-orbit {

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

#7

@chefdirector

in #earth-orbit is a ';' missing after: "height: 500px"


#8

@chefdirector Tmbdegroen is correct about the missing semi-colon (;), but you're also missing one after top in the #earth-orbit rule, and you've got a colon (:) instead of a semi-colon after the border-width: 2px, also for #earth-orbit :)


#10

Try getting rid of the earth orbit function at the bottom of your code, my code doesn't have that function and it worked perfectly and orbited.


#11

A post was split to a new topic: My earth position won't work


#12