CSS：在循环div中放置three.js？

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属性将其推向右侧，但如果没有＆＃34; planet＆＃34;的JS代码，则很难解决。

＆＃13;

＆＃13;

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

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;