7/7. The rotation isn't working! SOLVED


#1

Okay, so I already finished the Sun and Earth, and i'm actually working on Venus at the moment. I already did Mercury too and that worked fine. Then I put Venus's orbit line thing where it needs to go, but then when I went to full screen...The Venus-orbit thingy was ALLLLLL the way to the left?? What happened? I tried to fix it.. but i couldn't do it.. So here's my code for that...

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;
top: 50%;
left: 50%;

height: 100px;
width: 100px;
margin-top: -50px; 
margin-left: -50px;

}

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: 300px;
height: 300px;
margin-top: -150px;
margin-left: -155px;

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;

}

mercury {

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

height: 15px;
width: 15px;
margin-left: -25px;
margin-top: -25px;

}

mercury-orbit {

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

width:180px;
height: 180px;
margin-top: -90px;
margin-left: -95px;

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

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

}

**

venus {

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

height: 40px;
width: 40px;
margin-left: -0px;
margin-top: -5px;

}

venus-orbit {

position: absolute;
top: 40%;
left: 195;

width:240px;
height: 240px;
margin-top: -95px;
margin-left: -110px;

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

-webkit-animation: spin-right 6s linear infinite;
 -moz-animation: spin-right 6s linear infinite;
  -ms-animation: spin-right 6s linear infinite;
   -o-animation: spin-right 6s linear infinite;
      animation: spin-right 6s 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);
}
}
[/quote]


#2

@caliirie,
What are those 2 star-characters doing in your CSS-file-definition


#3

I think they were from writing it down when i was trying to make it bold....


#4

@caliirie,
did you remove them.... ( the ** )


#5

they weren't apart of the actual code...is what im saying...so its a different problem


#6

In your venus-orbit You are missing the "%" after 195
You have: left: 195;
Should be: left:195%;