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

Sun, Earth, and Code Forum

View Course » View Exercise

135 points
50f8f0e2a978719b64c7a41a10421624?s=140&d=retro
Submitted by
Alexander
almost 4 years ago

transform property

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

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

3rd row, there is mistake. Dont know what ...
Missing standard property "transform'' to go along with ''-webkit-transform''.

What should i do?


1 vote

permalink

It worked for me.

HTML

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

    <div id='earth-orbit'
    <img id="earth" src="http://goo.gl/o3YWu9">
    </div>
</body>

CSS

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: 200px;
width: 200px;
margin-top: -100px;
margin-left: -100px;

border-color: red;
border-width: 8px;
border-style: solid;
border-radius: 100%;

box-shadow: 0 0 128px red;
}

#earth {
/* Style your earth */
position: absolute;
top: 0;
left: 50%;

height: 50px;
width: 50px;
margin-left: -25px;
margin-top: -25px;
}

#earth-orbit {
/* For Section #2 */
position: absolute;
top: 50%;
left: 50%;

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

border-width: 2px;
border-style: dotted;
border-radius: 50%;
-webkit-animation: spin-right 10s linear infinite;
animation: spin-right 10s linear infinite;
}
@-webkit-keyframes spin-right {
100% {
-webkit-transform: rotate(360deg);
}
}

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

Hope it works for you. :)

571 points
501012752ccf7100020300ec_507235449
Submitted by
Ben Posey
over 3 years ago


0 votes

permalink

here is my project from that part hope it helps on the CSS tab
#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;
}

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

543 points
Picture
Submitted by
Cisco
almost 4 years ago


0 votes

permalink

I have webkit problem and i didnt understand where to put these? before webkit or in it?

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

... but the thing is, everytime i loose the earths orbit when i change its values for margin top and left.

135 points
50f8f0e2a978719b64c7a41a10421624?s=140&d=retro
Submitted by
Alexander
almost 4 years ago

2 Comments

Picture Cisco almost 4 years ago

yea i think you will have to find values that you like have you tried lower values? i think that may bring the earth a little closer to the sun during the rotations

50f8f0e2a978719b64c7a41a10421624?s=140&d=retro Alexander almost 4 years ago

I did that when i was doing, bcs i saw its impossible to be -250px. At the end it was something around 30px one and -12 the other one, if i remember correct.

But then! There is this thing! The orbit he is showing me with these small values, its not the same when i type and when its fullscreen. I used some other 3rd values to put around sun properly, but when i go fullscreen its dislocated. So i was giving this 30, -12, and in editor it was lower, right diagonaly from the sun, but in the fullscreen it was ok.