CODEWITHSUNDEEP
htmlcsscss-transitions
bilcker
bilcker

Reputation: 1130

CSS Transforms to Rotate around a Skewed Circle

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.

I have been playing around with different transforms but so far no luck

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

Any Help any one could provide would be great thank you.

My Fiddle

Upvotes: 1

Views: 1574

Answers (1)

Matej Žvan
Matej Žvan

Reputation: 766

I managed to do it by adding 2 containers and skew-ing the first one animating the child and rewerting skew on .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*/
}

you can have a look on this fidle https://jsfiddle.net/npjayzgs/6/

Upvotes: 2

Related Questions