Html循环内容动画

Question

我有一个内容列表，我希望它显示为一个圆圈，就像这个图像 我可以使用CSS来使图像角落圆，但我不能使它看起来像一个圆圈。我试图使用旋转木马css滑块但是找不到任何东西。有人可以帮我找到类似的东西，这样我就可以弄清楚这些动画是如何运作的吗？

例如看看这个html

<div class="circle-menu">
<ul>
    <li><a class="spiritual" href="#">Spiritual</a></li>
    <li><a class="occupational" href="#">Occupational</a></li>
    <li><a class="emotional" href="#">Emotional</a></li>
    <li><a class="environmental" href="#">Environmental</a></li>
    <li><a class="intellectual" href="#">Intellectual</a></li>
    <li><a class="social" href="#">Social</a></li>
    <li><a class="physical" href="#">Physical</a></li>
</ul>

其css

    .circle-menu li {
  list-style: none;
  display: inline;
}

.circle-menu {
    position: relative;
    width: 24em;
    height: 24em;
    border: dashed 2px #cccccc;
    border-radius: 50%;
    margin: 5em auto 7em;
}
.circle-menu a {
  display: block;
  position: absolute;
  top: 50%; 
  left: 50%;
  width: 8em; height: 8em;
  line-height:8em;
  margin: -3.5em;
  -moz-border-radius: 4em;
  -webkit-border-radius: 4em;
  border-radius: 4em;
  text-align: center;
  text-decoration: none;
  color: white;
  box-sizing: border-box;
}

.circle-menu a.spiritual {background:#009cde;opacity: 0.6;}
.circle-menu a.occupational {background:#3a913f;opacity: 0.6;}
.circle-menu a.emotional {background:#fecd06;opacity: 0.6;}
.circle-menu a.environmental {background:#fa7f00;opacity: 0.6;}
.circle-menu a.intellectual {background:#ed2124;opacity: 0.6;}
.circle-menu a.social {background:#932683;opacity: 0.6;}
.circle-menu a.physical {background:#203864;opacity: 0.6;}

.circle-menu a.spiritual:hover {background:#009cde;opacity: 1.0;}
.circle-menu a.occupational:hover {background:#3a913f;opacity: 1.0;}
.circle-menu a.emotional:hover {background:#fecd06;opacity: 1.0;}
.circle-menu a.environmental:hover {background:#fa7f00;opacity: 1.0;}
.circle-menu a.intellectual:hover {background:#ed2124;opacity: 1.0;}
.circle-menu a.social:hover {background:#932683;opacity: 1.0;}
.circle-menu a.physical:hover {background:#203864;opacity: 1.0;}


 /* 360/7= 51 roughly so for 7 elements rotate the element every 51deg. 12em translate is half the container */
.circle-menu .spiritual { transform: rotate(51deg) translate(12em) rotate(-51deg); -webkit-transform: rotate(51deg) translate(12em) rotate(-51deg); -ms-transform: rotate(51deg) translate(12em) rotate(-51deg);}
.circle-menu .occupational { transform: rotate(102deg) translate(12em) rotate(-102deg); -webkit-transform: rotate(102deg) translate(12em) rotate(-102deg); -ms-transform: rotate(102deg) translate(12em) rotate(-102deg);}
.circle-menu .emotional { transform: rotate(153deg) translate(12em) rotate(-153deg); -webkit-transform: rotate(153deg) translate(12em) rotate(-153deg); -ms-transform: rotate(153deg) translate(12em) rotate(-153deg);}
.circle-menu .environmental { transform: rotate(204deg) translate(12em) rotate(-204deg); -webkit-transform: rotate(204deg) translate(12em) rotate(-204deg); -ms-transform:rotate(204deg) translate(12em) rotate(-204deg);}
.circle-menu .intellectual { transform: rotate(255deg) translate(12em) rotate(-255deg); -webkit-transform: rotate(255deg) translate(12em) rotate(-255deg); -ms-transform: rotate(255deg) translate(12em) rotate(-255eg);}
.circle-menu .social { transform: rotate(306deg) translate(12em) rotate(-306deg); -webkit-transform: rotate(306deg) translate(12em) rotate(-306deg); -ms-transform: rotate(306deg) translate(12em) rotate(-306deg);}
.circle-menu .physical { transform: rotate(357deg) translate(12em) rotate(-357deg); -webkit-transform: rotate(357deg) translate(12em) rotate(-357deg); -ms-transform: rotate(357deg) translate(12em) rotate(-357deg);}

它的代码泛可以在这里找到 https://codepen.io/am2222/pen/XzqxNG

我想通过扫描鼠标或手

来旋转上面的圆圈

感谢