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

任何人都能提供的任何帮助都会非常感谢你。

My Fiddle

Answer 1

我设法通过添加2个容器并倾斜第一个动画孩子并在.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/

CSS转换为围绕倾斜圆圈旋转

1 个答案: