HTML太阳系问题

Question

我正在为学校制作一个太阳能系统，我无法完全向左和向上滚动以远远看到整个事情。只是为了澄清，我正在使用Safari，谷歌Chrome使问题变得更糟。

html, body {
    width: 100%;
    height: 100%;
    
    background: url(http://images.kaneva.com/filestore9/4523625/6569743/starryUnightUtexture.jpg) repeat center center; 
    -webkit-background-size: cover;
    -moz-background-size: cover;
    -o-background-size: cover;
    background-size: cover;
    transform: scale(1.2);
    transform-origin: 50% 50%;
}

body {
    width: 1000px;
    height: 1000px;
}

div {
    width: 500%;
    margin: 0 inherit;   
}   

#sun {
    position: absolute;
    top: 50%;
    left: 50%;
    
    height: 300px;
    width: 300px;
    margin-top: -150px; 
    margin-left: -155px;
    
    
    
    box-shadow: 0 0 0px red;
}

#mercury {
    /* Style your earth */
        position: absolute;
        top: 13.5%;
        left: 13.5%;
        width: 10px; 

    } 
        

#mercury-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 4.81s linear infinite;
     -moz-animation: spin-right 4.81s linear infinite;
      -ms-animation: spin-right 4.81s linear infinite;
       -o-animation: spin-right 4.81s linear infinite;
          animation: spin-right 4.81s linear infinite;
}

#venus {
    /* Style your earth */
        position: absolute;
        top: 13.6%;
        left: 13.6%;
        width: 15px; 
    } 

#venus-orbit {
position: absolute;
    top: 50%;
    left: 50%;

    width: 900px;
    height: 900px;
    margin-top: -450px;
    margin-left: -450px;

    border-width: 2px;
    border-style: dotted;
    border-color: white;
    border-radius: 50%;
    
     -webkit-animation: spin-right 12.3s linear infinite;
     -moz-animation: spin-right 12.3s linear infinite;
      -ms-animation: spin-right 12.3s linear infinite;
       -o-animation: spin-right 12.3s linear infinite;
          animation: spin-right 12.3s linear infinite;
}

#earth {
    /* Style your earth */
        position: absolute;
        top: 13.8%;
        left: 13.8%;
        width: 20px; 
    } 

#earth-orbit {
position: absolute;
    top: 50%;
    left: 50%;

    width: 1200px;
    height: 1200px;
    margin-top: -600px;
    margin-left: -600px;

    border-width: 2px;
    border-style: dotted;
    border-color: white;
    border-radius: 50%;
    
     -webkit-animation: spin-right 20s linear infinite;
     -moz-animation: spin-right 20s linear infinite;
      -ms-animation: spin-right 20s linear infinite;
       -o-animation: spin-right 20s linear infinite;
          animation: spin-right 20s linear infinite;
}

#mars {
    /* Style your earth */
        position: absolute;
        top: 13.8%;
        left: 13.8%;
        width: 20px; 
    } 

#mars-orbit {
position: absolute;
    top: 50%;
    left: 50%;

    width: 1600px;
    height: 1600px;
    margin-top: -800px;
    margin-left: -800px;

    border-width: 2px;
    border-style: dotted;
    border-color: white;
    border-radius: 50%;
    
     -webkit-animation: spin-right 37.6s linear infinite;
     -moz-animation: spin-right 37.6s linear infinite;
      -ms-animation: spin-right 37.6s linear infinite;
       -o-animation: spin-right 37.6s linear infinite;
          animation: spin-right 37.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);
  }
}

#asteroid1 {
    /* Style your earth */
        position: absolute;
        top: 13.8%;
        left: 13.8%;
        width: 20px; 
    } 

#asteroid2 {
    /* Style your earth */
        position: absolute;
        top: 13.8%;
        left: 13.8%;
        width: 20px; 
    } 

#asteroid3 {
    /* Style your earth */
        position: absolute;
        top: 13.8%;
        left: 13.8%;
        width: 20px; 
    } 


#asteroid4 {
    /* Style your earth */
        position: absolute;
        top: 13.8%;
        left: 13.8%;
        width: 20px; 
    } 

#asteroid5 {
    /* Style your earth */
        position: absolute;
        top: 13.8%;
        left: 13.8%;
        width: 20px; 
    } 

#asteroid6 {
    /* Style your earth */
        position: absolute;
        top: 13.8%;
        left: 13.8%;
        width: 20px; 
    } 

#asteroid7 {
    /* Style your earth */
        position: absolute;
        top: 13.8%;
        left: 13.8%;
        width: 20px; 
    } 

#asteroid8 {
    /* Style your earth */
        position: absolute;
        top: 13.8%;
        left: 13.8%;
        width: 20px; 
    } 

#asteroid9 {
    /* Style your earth */
        position: absolute;
        top: 13.8%;
        left: 13.8%;
        width: 20px; 
    } 



#asteroid-orbit1 {
position: absolute;
    top: 50%;
    left: 50%;

    width: 1900px;
    height: 1900px;
    margin-top: -950px;
    margin-left: -950px;

    border-width: 2px;
    border-style: dotted;
    border-color: white;
    border-radius: 50%;
    
     -webkit-animation: spin-right 20s linear infinite;
     -moz-animation: spin-right 20s linear infinite;
      -ms-animation: spin-right 20s linear infinite;
       -o-animation: spin-right 20s linear infinite;
          animation: spin-right 20s linear infinite;
}

#asteroid-orbit2 {
position: absolute;
    top: 50%;
    left: 50%;

    width: 1900px;
    height: 1900px;
    margin-top: -950px;
    margin-left: -950px;

    border-width: 0px;
    border-style: dotted;
    border-color: white;
    border-radius: 50%;
    
     -webkit-animation: spin-right 23s linear infinite;
     -moz-animation: spin-right 23s linear infinite;
      -ms-animation: spin-right 23s linear infinite;
       -o-animation: spin-right 23s linear infinite;
          animation: spin-right 23s linear infinite;
}


#asteroid-orbit3 {
position: absolute;
    top: 50%;
    left: 50%;

    width: 1900px;
    height: 1900px;
    margin-top: -950px;
    margin-left: -950px;

    border-width: 0px;
    border-style: dotted;
    border-color: white;
    border-radius: 50%;
    
     -webkit-animation: spin-right 26s linear infinite;
     -moz-animation: spin-right 26s linear infinite;
      -ms-animation: spin-right 26s linear infinite;
       -o-animation: spin-right 26s linear infinite;
          animation: spin-right 26s linear infinite;
}


#asteroid-orbit4 {
position: absolute;
    top: 50%;
    left: 50%;

    width: 1900px;
    height: 1900px;
    margin-top: -950px;
    margin-left: -950px;

    border-width: 0px;
    border-style: dotted;
    border-color: white;
    border-radius: 50%;
    
     -webkit-animation: spin-right 29s linear infinite;
     -moz-animation: spin-right 29s linear infinite;
      -ms-animation: spin-right 29s linear infinite;
       -o-animation: spin-right 29s linear infinite;
          animation: spin-right 29s linear infinite;
}


#asteroid-orbit5 {
position: absolute;
    top: 50%;
    left: 50%;

    width: 1900px;
    height: 1900px;
    margin-top: -950px;
    margin-left: -950px;

    border-width: 0px;
    border-style: dotted;
    border-color: white;
    border-radius: 50%;
    
     -webkit-animation: spin-right 32s linear infinite;
     -moz-animation: spin-right 32s linear infinite;
      -ms-animation: spin-right 32s linear infinite;
       -o-animation: spin-right 32s linear infinite;
          animation: spin-right 32s linear infinite;
}


#asteroid-orbit6 {
position: absolute;
    top: 50%;
    left: 50%;

    width: 1900px;
    height: 1900px;
    margin-top: -950px;
    margin-left: -950px;

    border-width: 0px;
    border-style: dotted;
    border-color: white;
    border-radius: 50%;
    
     -webkit-animation: spin-right 35s linear infinite;
     -moz-animation: spin-right 35s linear infinite;
      -ms-animation: spin-right 35s linear infinite;
       -o-animation: spin-right 35s linear infinite;
          animation: spin-right 35s linear infinite;
}


#asteroid-orbit7 {
position: absolute;
    top: 50%;
    left: 50%;

    width: 1900px;
    height: 1900px;
    margin-top: -950px;
    margin-left: -950px;

    border-width: 0px;
    border-style: dotted;
    border-color: white;
    border-radius: 50%;
    
     -webkit-animation: spin-right 38s linear infinite;
     -moz-animation: spin-right 38s linear infinite;
      -ms-animation: spin-right 38s linear infinite;
       -o-animation: spin-right 38s linear infinite;
          animation: spin-right 38s linear infinite;
}


#asteroid-orbit8 {
position: absolute;
    top: 50%;
    left: 50%;

    width: 1900px;
    height: 1900px;
    margin-top: -950px;
    margin-left: -950px;

    border-width: 0px;
    border-style: dotted;
    border-color: white;
    border-radius: 50%;
    
     -webkit-animation: spin-right 41s linear infinite;
     -moz-animation: spin-right 41s linear infinite;
      -ms-animation: spin-right 41s linear infinite;
       -o-animation: spin-right 41s linear infinite;
          animation: spin-right 41s linear infinite;
}


#asteroid-orbit9 {
position: absolute;
    top: 50%;
    left: 50%;

    width: 1900px;
    height: 1900px;
    margin-top: -950px;
    margin-left: -950px;

    border-width: 0px;
    border-style: solid;
    border-color: white;
    border-radius: 50%;
    
     -webkit-animation: spin-right 43s linear infinite;
     -moz-animation: spin-right 43s linear infinite;
      -ms-animation: spin-right 43s linear infinite;
       -o-animation: spin-right 43s linear infinite;
          animation: spin-right 43s 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);
  }
}

#jupiter {
    /* Style your earth */
        position: absolute;
        top: 13.6%;
        left: 13.6%;
        width: 80px; 
    } 

#jupiter-orbit {
position: absolute;
    top: 50%;
    left: 50%;

    width: 3600px;
    height: 3600px;
    margin-top: -1800px;
    margin-left: -1800px;

    border-width: 2px;
    border-style: dotted;
    border-color: white;
    border-radius: 50%;
    
     -webkit-animation: spin-right 237s linear infinite;
     -moz-animation: spin-right 237s linear infinite;
      -ms-animation: spin-right 237s linear infinite;
       -o-animation: spin-right 237s linear infinite;
          animation: spin-right 237s linear infinite;
}

#saturn {
    /* Style your earth */
        position: absolute;
        top: 12.98%;
        left: 12.98%;
        width: 160px; 
    } 

#saturn-orbit {
position: absolute;
    top: 50%;
    left: 50%;

    width: 4800px;
    height: 4800px;
    margin-top: -2400px;
    margin-left: -2400px;

    border-width: 2px;
    border-style: dotted;
    border-color: white;
    border-radius: 50%;
    
     -webkit-animation: spin-right 588.9s linear infinite;
     -moz-animation: spin-right 588.9s linear infinite;
      -ms-animation: spin-right 588.9s linear infinite;
       -o-animation: spin-right 588.9s linear infinite;
          animation: spin-right 588.9s linear infinite;
}

#uranus {
    /* Style your earth */
        position: absolute;
        top: 13.3%;
        left: 13.3%;
        width: 160px; 
    } 

#uranus-orbit {
position: absolute;
    top: 50%;
    left: 50%;

    width: 5800px;
    height: 5800px;
    margin-top: -2900px;
    margin-left: -2900px;

    border-width: 2px;
    border-style: dotted;
    border-color: white;
    border-radius: 50%;
    
     -webkit-animation: spin-right 1680.3s linear infinite;
     -moz-animation: spin-right 1680.3s linear infinite;
      -ms-animation: spin-right 1680.3s linear infinite;
       -o-animation: spin-right 1680.3s linear infinite;
          animation: spin-right 1680.3s linear infinite;
}

<html>
    <head>
        <link rel="stylesheet" href="inner.css" />
        <link rel="stylesheet" href="outer.css" />
    </head>
    <center>
    <body>
    
        <!-- Right below is an image of the sun -->
        <img id="sun" src="http://www.spiritofexploration.com/images/sun2.png">
        
        <!-- Insert the 'earth' on the next line -->
        <div id="mercury-orbit">
        <img id="mercury" src="http://www.soulconnections.net/wp-content/uploads/2014/06/mercury.gif"> 
        </div>
        
        <div id="venus-orbit">
        <img id="venus" src="http://www.solstation.com/stars/venus.gif">
        </div>
        
        <div id="earth-orbit">
        <img id="earth" src="http://www.fresnostate.edu/csm/ees/images/earth.jpg">
        </div>
        
        <div id="mars-orbit">
        <img id="mars" src="http://quest.nasa.gov/mars/background/images/mars.gif">
        </div>
   
        <div id="asteroid-orbit1">
            <img id="asteroid1" src="http://www.asteroidapp.com/images/asteroid.png">
        </div>
        <div id="asteroid-orbit2">
            <img id="asteroid2" src="http://www.asteroidapp.com/images/asteroid.png">
        </div>
        <div id="asteroid-orbit3">
            <img id="asteroid3" src="http://www.asteroidapp.com/images/asteroid.png">
        </div>
        <div id="asteroid-orbit4">
            <img id="asteroid4" src="http://www.asteroidapp.com/images/asteroid.png">
        </div>
        <div id="asteroid-orbit5">
            <img id="asteroid5" src="http://www.asteroidapp.com/images/asteroid.png">
        </div>
        <div id="asteroid-orbit6">
            <img id="asteroid6" src="http://www.asteroidapp.com/images/asteroid.png">
        </div>
        <div id="asteroid-orbit7">
            <img id="asteroid7" src="http://www.asteroidapp.com/images/asteroid.png">
        </div>
        <div id="asteroid-orbit8">
            <img id="asteroid8" src="http://www.asteroidapp.com/images/asteroid.png">
        </div>
        <div id="asteroid-orbit9">
            <img id="asteroid9" src="http://www.asteroidapp.com/images/asteroid.png">
        </div>
        <div id="jupiter-orbit">
            <img id="jupiter" src="http://fc09.deviantart.net/fs70/f/2014/073/f/9/jupiter_by_kalin1998-d7a71xe.gif">
        </div>
        
        <div id="saturn-orbit">
            <img id="saturn" src="http://space-facts.com/wp-content/uploads/saturn.png">
        </div>
        
        <div id="uranus-orbit">
            <img id="uranus" src="http://moonlinks.net/wp-content/uploads/2012/04/uranus.png">
        </div>
        
    </body>
    </center>
</html>

任何帮助都会有所帮助。具体而言，它主要是9个小行星轨道，以及需要最多帮助的木星，土星和天王星的轨道。

Answer 1

你需要做至少两件事：

1. 让body更大;至少6000px x 6000px
2. 将每个轨道的中心置于（3000px，3000px）

您需要滚动查看内容，但一切都可以访问。