CSS：円div内にthree.jsを配置しますか？

Question

私は円のdivがthree.jsを含むdivの親であるので、それらの中にthree.jsのアニメーションを使って複数のdivを画面上で水平に配置しようとしています。最終的には、これらのサークルを画面上で横方向にスクロールできるようにしたいと考えています。

私は円形のdivの水平型ラインを作成し、その中に3つの.js divを部分的に配置することに成功しましたが、親循環div内にアニメーションを配置することができず、完璧な円になる問題があります。私はこれを初めて熟知しており、これを達成する最善の方法を見つけるのが難しいです。ここで私はこれまで持っているものです： 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> 

これは、これが作成するものである：

私はここで間違って何をしているのですか？

Answer 1

完全な円を描くには、高さと幅を同じ値（例のように）に設定する必要があります。もう1つの問題については、leftプロパティを設定すると右にプッシュされますが、あなたの「惑星」のJSコードがなければ、解決するのは難しいでしょう。

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