CSS：將three.js放在圓形div中？

Question

我想在屏幕上水平放置多個div，並在內部使用three.js動畫，因爲圓形div是包含three.js的div的父級。最終，我希望這些圈子能夠在屏幕上水平滾動。

我成功創建了圓形div的水平陣容，並部分地將我的three.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

要有一個完美的圓，你必須設置高度和寬度相同的值（如我的例子）。對於另一個問題，將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>