Duda CSS

Iniciado por deeps_vee, Noviembre 07, 2014, 11:11:32 PM

Tema anterior - Siguiente tema

0 Miembros y 1 Visitante están viendo este tema.

Noviembre 07, 2014, 11:11:32 PM Ultima modificación: Noviembre 07, 2014, 11:44:40 PM por deeps_vee
Hola soy nuevo en estoy  y andaba viendo por la pagina codeacademy para intentar de aprender un poco de lenguajes de programación.
Bueno en un ejercicio que termine te ensañaba a hacer la tierra rodeando al sol.
Pero tuve curiosidad si le podia hacer una luna que se moviera con la tierra.
pero no logro saber como hacer que la orbita de la luna siga a la tierra les dejo el codigo
Código: php
<html>
    <head>
        <link rel="stylesheet" href="style.css" />
    </head>
   
    <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://recursostic.educacion.es/ciencias/biosfera/web/alumno/1ESO/planeta_habitado/imagenes/planetatierra.jpg">
       
       
        <div id="moon-orbit">
        <img id="moon" src="http://lroc.sese.asu.edu/assets/IMG/eightB-ef14459a40042dd3c41d4f823a6d7973.jpg">
        </div>
       
    </body>
</html>

y el css
Código: php
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%;
    border-color: orange;
    border-width: 7px;
    border-style:solid;
    border-radius:50%;
    box-shadow: 0 0 264px red;
   
    /* 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:60px;
    margin-left: -25px;
    margin-top: -25px;
    box-shadow: 0 0 500px blue;
}

#earth-orbit {
    /* For Section #2 */
    position:absolute;
    top:50%;
    left:50%;
    width:500px;
    height:500px;
    margin-top: -250px;
    margin-left:-250;
    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);
  }
}
#moon{
    position:absolute;
    height:20px;
    width:20px;
   
    }
#moon-orbit{
    position:absolute;
    top:30%;
    left:5%;
    width:75px;
    height:75px;
    margin-top: 250px;
    margin-left:250;
    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);
    }
}



y si si alguien podria explicarme bien como funciona esto ya que entendí maso menos lo suficiente para hacer mover la tierra pero no lo explicaba mucho la pagina ,igual ahora me voy a fijar en google haber si encuentro algo

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

Espero que me puedan ayudar,muchas gracias.
Perdón por mis horrores de ortografía que seguramente hay mucho porque no es mi fuerte.
Nos leemos  :)

Ya conseguí arreglar el problema  pero gracias igual.