<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <title>Document</title>
  <link rel="stylesheet" href="css/circle-box.css">
</head>
<body>
  <section class="circle-box">
    <div class="circle-item"></div>
    <div class="circle-item"></div>
    <div class="circle-item"></div>
    <div class="circle-item"></div>
    <div class="circle-item"></div>
    <div class="circle-item"></div>
    <div class="circle-item"></div>
    <div class="circle-item"></div>
  </section>
</body>
</html>
body {
  background: #000;
}

.circle-box {
  height: 100vh;

  perspective: 3900px;
    -o-perspective: 3900px;
    -ms-perspective: 3900px;
    -webkit-perspective: 3900px;
    -moz-perspective: 3900px;

  transform-style: preserve-3d;
    -o-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
}

.circle-item {
  position: absolute;
  width: 100%;
  max-width: 450px;
  left: 50%;
  top: 50%;
  height: 450px;
    box-shadow: 0 0 73px red;
    height: 450px;
    border: solid 3px #fff;
  border-radius: 100%;
    margin-top: -225px;
    margin-left: -225px;


  box-sizing: border-box;
    -o-box-sizing: border-box;
    -ms-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;

  transform-style: preserve-3d; 
    -webkit-transform-style: preserve-3d;
    -moz-transform-style: preserve-3d;
    -ms-transform-style: preserve-3d;
    -o-transform-style: preserve-3d;

  -webkit-animation:alternate moveCircle 10s linear infinite;
  -moz-animation:alternate moveCircle 10s linear infinite;
  -ms-animation:alternate moveCircle 10s linear infinite;
  -o-animation:alternate moveCircle 10s linear infinite;
  animation:alternate moveCircle 10s linear infinite;
}

.circle-item:nth-child(2){
  -webkit-animation-delay:300ms;
  -moz-animation-delay:300ms;
  -ms-animation-delay:300ms;
  -o-animation-delay:300ms;
  animation-delay:300ms;
}

.circle-item:nth-child(3){
  -webkit-animation-delay:600ms;
  -moz-animation-delay:600ms;
  -ms-animation-delay:600ms;
  -o-animation-delay:600ms;
  animation-delay:600ms;
}

.circle-item:nth-child(4){
  -webkit-animation-delay:900ms;
  -moz-animation-delay:900ms;
  -ms-animation-delay:900ms;
  -o-animation-delay:900ms;
  animation-delay:900ms;
}

.circle-item:nth-child(5){
  -webkit-animation-delay:1200ms;
  -moz-animation-delay:1200ms;
  -ms-animation-delay:1200ms;
  -o-animation-delay:1200ms;
  animation-delay:1200ms;
}

.circle-item:nth-child(6){
  -webkit-animation-delay:1500ms;
  -moz-animation-delay:1500ms;
  -ms-animation-delay:1500ms;
  -o-animation-delay:1500ms;
  animation-delay:1500ms;
}

.circle-item:nth-child(7){
  -webkit-animation-delay:1600ms;
  -moz-animation-delay:1600ms;
  -ms-animation-delay:1600ms;
  -o-animation-delay:1600ms;
  animation-delay:1600ms;
}

.circle-item:nth-child(8){
  -webkit-animation-delay:1800ms;
  -moz-animation-delay:1800ms;
  -ms-animation-delay:1800ms;
  -o-animation-delay:1800ms;
  animation-delay:1800ms;
}

@-webkit-keyframes moveCircle {
  0% {
    -webkit-transform: rotateX(0) rotateY(0);
  }

  25% {
    -webkit-transform: rotateX(180deg) rotateY(100deg);
  }

  50% {
    -webkit-transform: rotateX(340deg)  rotateY(360deg);
  }

  75% {
    -webkit-transform: rotateX(460deg)  rotateY(550deg);
  }

  100% {
    -webkit-transform: rotateX(520deg)  rotateY(780deg);
  }
}

@-moz-keyframes moveCircle {
  0% {
    -moz-transform: rotateX(0) rotateY(0);
  }

  25% {
    -moz-transform: rotateX(180deg) rotateY(100deg);
  }

  50% {
    -moz-transform: rotateX(340deg)  rotateY(360deg);
  }

  75% {
    -moz-transform: rotateX(460deg)  rotateY(550deg);
  }

  100% {
    -moz-transform: rotateX(520deg)  rotateY(780deg);
  }
}

@-ms-keyframes moveCircle {
  0% {
    -ms-transform: rotateX(0) rotateY(0);
  }

  25% {
    -ms-transform: rotateX(180deg) rotateY(100deg);
  }

  50% {
    -ms-transform: rotateX(340deg)  rotateY(360deg);
  }

  75% {
    -ms-transform: rotateX(460deg)  rotateY(550deg);
  }

  100% {
    -ms-transform: rotateX(520deg)  rotateY(780deg);
  }
}

@-o-keyframes moveCircle {
  0% {
    -o-transform: rotateX(0) rotateY(0);
  }

  25% {
    -o-transform: rotateX(180deg) rotateY(100deg);
  }

  50% {
    -o-transform: rotateX(340deg)  rotateY(360deg);
  }

  75% {
    -o-transform: rotateX(460deg)  rotateY(550deg);
  }

  100% {
    -o-transform: rotateX(520deg)  rotateY(780deg);
  }
}

@keyframes moveCircle {
  0% {
    transform: rotateX(0) rotateY(0);
  }

  25% {
    transform: rotateX(180deg) rotateY(100deg);
  }

  50% {
    transform: rotateX(340deg)  rotateY(360deg);
  }

  75% {
    transform: rotateX(460deg)  rotateY(550deg);
  }

  100% {
    transform: rotateX(520deg)  rotateY(780deg);
  }
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.