CSSが斜め円の周りを回転するように変換する

Question

もう1つの円を別の円の周りにうまく回転させました。しかし、私は歪んだ円の周りに同じ効果を達成しようとしており、これを達成する方法がわかりません。小さな円は円内を回転するだけで、より楕円形のパスをたどることはできません。私は私の問題を説明するためにフィドルを付けました。基本的に私は大きなサークルの周りに小さなサークルを回転させようとしています。

私は異なる変換で遊んでてきたが、これまでにいずれかが提供できる運

<div class="row"> 
    <div class="col-md-12"> 
     <div class="pile"> 
      <div class="venn venn-center-sphere"> 
       <h2 class="venn-title">PILE</h2> 
       <p class="venn-description">Positive Inclusive<br>Learning Environments</p> 
      </div> 
      <div class="venn-orbit-container venn-1"> 
       <div class="venn-orbit venn-orbit-1"></div> 
       <div class="venn-sphere venn-sphere-1" > 
        <h3 class="venn-sphere-title">Equity/Inclusivity</h3> 
       </div> 
      </div> 
      <div class="venn-orbit-container venn-2"> 
       <div class="venn-orbit venn-orbit-2"></div> 
      </div> 
      <div class="venn-orbit-container venn-3"> 
       <div class="venn-orbit venn-orbit-3"></div> 
      </div> 
     </div> 
    </div><!--End Column--> 
</div><!--End Row--> 

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

任意のヘルプはあなたに感謝素晴らしいことないだろう。

My Fiddle

Answer 1

私はあなたがこのFIDLE の表情を持つことができます2個のコンテナを追加することによって、それを行うとスキュー-INGの子をアニメーション最初のものをと.orbit

.venn-orbit-wrapper { 
     transform: skewX(-45deg); 
     margin-top: 280px; /* this can be improved just find a way to offset it*/ 
} 
.venn-orbit-innerWrapper { 
    /* move animation here*/ 
    /*Compensate for Parent Skew*/ 
    -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+, */ 
    animation: orbit-one 20s linear infinite; 
} 
.venn-sphere-1 { 
    transform: skewX(45deg) !important; /*reset skew*/ 
} 

にスキューをrewertingするために管理https://jsfiddle.net/npjayzgs/6/