Dark Orbit Transform CSS Modified

dark-orbit-transform-css-modified.markdown

Dark Orbit Transform CSS Modified

Saw an orbit example on the front page yesterday and I started thinking about what I could do.

A Pen by Motionharvest on CodePen.

License.

index.html

<div class="zone1">
  <div class="orb"></div>
  <div class="ring">
    <div class="pivot-wrapper level1">
      <div class="pivot r"></div>
      <div class="pivot l"></div>
    </div>
    <div class="pivot-wrapper level2">
      <div class="pivot r"></div>
      <div class="pivot l"></div>
    </div>
    <div class="pivot-wrapper level3">
      <div class="pivot r"></div>
      <div class="pivot l"></div>
    </div>
    <div class="pivot-wrapper level4">
      <div class="pivot r"></div>
      <div class="pivot l"></div>
    </div>
    <div class="pivot-wrapper level5"> 
      <div class="pivot r"></div>
      <div class="pivot l"></div>
    </div>
    <div class="pivot-wrapper level6">
      <div class="pivot r"></div>
      <div class="pivot l"></div>
    </div>
    <div class="pivot-wrapper level7">
      <div class="pivot r"></div>
      <div class="pivot l"></div>
    </div>
  </div>
</div>

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

style.css

body {
  background: black;
  overflow: hidden;
}

.zone1 {
  transform: translate(-50%);
  position: absolute;
  left: 50%;
  top: 30%;
  transform-origin: 50% 50%;
  perspective: 1200px; /* Keep perspective to allow depth rendering */
  transform-style: preserve-3d;
}

.orb {
  width: 80px;
  height: 80px;
  margin-left: -40px;
  margin-top: -4px;
  position: absolute;
  top: 55px;
  background: black;
  border-radius: 50%;
  box-shadow: 0px 0px 25px red;
  transform: translateZ(10px) rotateY(20deg); /* Orb stays at Z=0 */
}

.pivot-wrapper {
  position: absolute;
  animation: pivoter 8s infinite linear;
  transform-origin: center;
  transform-style: preserve-3d;
}

.pivot {
  position: absolute;
  width: 30px;
  height: 30px;
  background: black;
  box-shadow: 0px 0px 15px red;
  animation: antipivoter 8s infinite linear;
  overflow: hidden;
  border-radius: 50%;
  transform: translateZ(-20px); /* Set a negative Z depth for pivots to orbit behind */
}

.level1 .pivot.r { left: 0px; }
.level1 .pivot.l { left: -30px; }

.level2 .pivot.r { left: 31px; }
.level2 .pivot.l { left: -61px; }

.level3 .pivot.r { left: 45px; }
.level3 .pivot.l { left: -75px; }

.level4 .pivot.r { left: 58px; }
.level4 .pivot.l { left: -88px; }

.level5 .pivot.r { left: 45px; }
.level5 .pivot.l { left: -75px; }

.level6 .pivot.r { left: 31px; }
.level6 .pivot.l { left: -61px; }

.level7 .pivot.r { left: 0px; }
.level7 .pivot.l { left: -30px; }

.level2 { top: 25px; animation-delay: .5s; }
.level2 .pivot { animation-delay: .5s; }

.level3 { top: 50px; animation-delay: 1s; }
.level3 .pivot { animation-delay: 1s; }

.level4 { top: 75px; animation-delay: 1.5s; }
.level4 .pivot { animation-delay: 1.5s; }

.level5 { top: 100px; animation-delay: 2s; }
.level5 .pivot { animation-delay: 2s; }

.level6 { top: 125px; animation-delay: 2.5s; }
.level6 .pivot { animation-delay: 2.5s; }

.level7 { top: 150px; animation-delay: 3s; }
.level7 .pivot { animation-delay: 3s; }

@keyframes pivoter {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(360deg); }
}

@keyframes antipivoter {
  0% { transform: rotateY(0deg); }
  100% { transform: rotateY(-360deg); }
}