CSS: Platz drei.js innerhalb der kreisförmigen div?

Question

Ich versuche, mehrere divs in einer Zeile horizontal über den Bildschirm mit three.js Animationen in ihnen zu platzieren, wie in der kreisförmigen div ist das übergeordnete Element zu dem div, das die three.js enthält. Letztendlich möchte ich, dass diese Kreise horizontal über meinen Bildschirm scrollen können.

Es ist mir gelungen, eine horizontale Anordnung von kreisförmigen divs zu erstellen und mein divide.js div teilweise zu platzieren, jedoch kann ich meine Animation nicht innerhalb des übergeordneten kreisförmigen div zentrieren und habe Probleme beim Erreichen eines perfekten Kreises. Ich bin neu und habe Probleme, den besten Weg zu finden, dies zu erreichen. Hier ist, was ich bisher: CSS:

.circle { 
    display: table; 
    border-radius: 50%; 
    position: absolute; 
       margin: 50px auto; 
       background-color: lightgray; 
       height: 100px; 
       width: 0; 
} 
#planet { 


    vertical-align: middle; 
    text-align:center; 
    left:10%; 
    position:relative; /*makes left effective*/ 
    display:table-cell; 
} 

HTML:

<div class="wrapper" style="background-color:lightgrey;"> 
<div class="container"> 
<h1 id="titleHead">Projects</h1> 
    <a href=""> 
     <ul> 
     <div class ="circle"> 
     <div id ="planet"></div> 
     </div> 
     </ul> 
    </a> 
</div> 
</div> 
<script src="js/lowpolyPlanets.js"></script> 
</body> 

Dies ist, was das schafft:

Was mache ich falsch hier?

Answer 1

Um einen perfekten Kreis zu haben, müssen Sie Höhe und Breite auf den gleichen Wert einstellen (wie in meinem Beispiel). Für das andere Problem, setzen Sie die left Eigenschaft drücken Sie es richtig, aber ohne den JS-Code Ihres "Planeten" wäre es schwer zu lösen.

.circle { 
 
    display: table; 
 
    border-radius: 50%; 
 
    position: absolute; 
 
       margin: 50px auto; 
 
       background-color: lightgray; 
 
       height: 100px; 
 
       width: 100px; 
 
} 
 
#planet { 
 

 

 
    vertical-align: middle; 
 
    text-align:center; 
 
    left:10%; 
 
    position:relative; /*makes left effective*/ 
 
    display:table-cell; 
 
}

<div class="wrapper" style="background-color:lightgrey;"> 
 
<div class="container"> 
 
<h1 id="titleHead">Projects</h1> 
 
    <a href=""> 
 
     <ul> 
 
     <div class ="circle"> 
 
     <div id ="planet"></div> 
 
     </div> 
 
     </ul> 
 
    </a> 
 
</div> 
 
</div>