title: CSS Transforms to Rotate around a Skewed Circle
body: <p>I have successfully rotated one circle around the edge of another. However I am trying to accomplish the same effect around a circle that is skewed and I am unsure how to accomplish this. The smaller circle will only rotate in a circle and I can't get it to follow the path in a more oval shape. I have attached a fiddle to illustrate my problem, basically I am trying to have a smaller circle rotating around each of the bigger circles.</p>
  
  <p>I have been playing around with different transforms but so far no luck</p>
  
  <pre><code>&lt;div class="row"&gt;
      &lt;div class="col-md-12"&gt;
          &lt;div class="pile"&gt;
              &lt;div class="venn venn-center-sphere"&gt;
                  &lt;h2 class="venn-title"&gt;PILE&lt;/h2&gt;
                  &lt;p class="venn-description"&gt;Positive Inclusive&lt;br&gt;Learning Environments&lt;/p&gt;
              &lt;/div&gt;
              &lt;div class="venn-orbit-container venn-1"&gt;
                  &lt;div class="venn-orbit venn-orbit-1"&gt;&lt;/div&gt;
                  &lt;div class="venn-sphere venn-sphere-1" &gt;
                      &lt;h3 class="venn-sphere-title"&gt;Equity/Inclusivity&lt;/h3&gt;
                  &lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="venn-orbit-container venn-2"&gt;
                  &lt;div class="venn-orbit venn-orbit-2"&gt;&lt;/div&gt;
              &lt;/div&gt;
              &lt;div class="venn-orbit-container venn-3"&gt;
                  &lt;div class="venn-orbit venn-orbit-3"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
      &lt;/div&gt;&lt;!--End Column--&gt;
  &lt;/div&gt;&lt;!--End Row--&gt;
  
  .venn-orbit{
      border: 2px rgb(115,166,183) solid;
      border-radius: 50%;
      position: absolute; 
      left:0;
      right:0;
      top:0;
      bottom:0;
      margin:auto;
      width:50%;
      height:100%;
      z-index:0;
  }
  .venn-orbit-1{
      transform:skewX(-45deg);
  }
  .venn-orbit-2{
      transform:skewX(45deg);
  }
  .venn-orbit-3{
      height:50%;
      width:100%;
  }
  
  .sphere-one{
   -webkit-animation: orbit-one 20s linear infinite; /* Chrome, Safari 5 */
     -moz-animation: orbit-one 20s linear infinite; /* Firefox 5-15 */
       -o-animation: orbit-one 20s linear infinite; /* Opera 12+ */
          animation: orbit-one 20s linear infinite; /* Chrome, Firefox 16+, 
                                                    IE 10+, Safari 5 */ 
  }
  
  @keyframes orbit-one {
      from { transform:rotate(0deg) translate(180px, 92px) rotate(0deg); }
      to   { transform: rotate(360deg) translate(180px, 92px) rotate(-360deg);}
  }
  </code></pre>
  
  <p>Any Help any one could provide would be great thank you.</p>
  
  <p><a href="https://jsfiddle.net/bilcker/npjayzgs/" rel="nofollow">My Fiddle</a></p>