CSS转换为绕着倾斜的圆圈旋转

Question

我成功地把一个圆圈绕着另一个圆的边缘旋转。然而，我试图在一个扭曲的圆周围实现同样的效果，我不知道如何实现这一点。较小的圆圈只在一个圆圈中旋转，我不能让它以更椭圆形的形状沿着这条路走。我附加了一个小提琴来说明我的问题，基本上，我试图让一个较小的圆圈围绕每一个较大的圆旋转。

我一直在玩不同的变换，但到目前为止没有运气。

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

任何人能提供的任何帮助都将是非常感谢的。

我的宝贝

Answer 1

我通过添加两个容器和倾斜第一个容器来完成这个任务，在.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*/
}

您可以看看这个fidle https://jsfiddle.net/npjayzgs/6/