title: Html Circular content animation
body: <p>I have a list of contents and I want to make it appear as a circle,just like this image <a href="https://i.stack.imgur.com/4M0sM.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/4M0sM.png" alt="this image"></a>
  I can use css to make images corners round but I can not make it appear as a circle. I tried to use carousel css sliders but clould not find any thing. Can some one please help me find sth at lease similar so I can figure out how these kind f animations work?</p>
  
  <p>for example look at this html</p>
  
  <pre><code>&lt;div class="circle-menu"&gt;
  &lt;ul&gt;
      &lt;li&gt;&lt;a class="spiritual" href="#"&gt;Spiritual&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a class="occupational" href="#"&gt;Occupational&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a class="emotional" href="#"&gt;Emotional&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a class="environmental" href="#"&gt;Environmental&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a class="intellectual" href="#"&gt;Intellectual&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a class="social" href="#"&gt;Social&lt;/a&gt;&lt;/li&gt;
      &lt;li&gt;&lt;a class="physical" href="#"&gt;Physical&lt;/a&gt;&lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p></p>
  
  <p>its css</p>
  
  <pre><code>    .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);}
  </code></pre>
  
  <p>its code-pan is available here
  <a href="https://codepen.io/am2222/pen/XzqxNG" rel="nofollow noreferrer">https://codepen.io/am2222/pen/XzqxNG</a></p>
  
  <p>I want the above circle rotates by sweep of mouse or hand</p>
  
  <p>thanks</p>