<div class="science">
  <div class="isthis">
    <span class="thisisscienceiguess"></span>
    <span class="andthisistoo"></span>
    <span class="thisistooofcourse"></span>
  </div>
</div>

html, body {height: 100%}
.science {
  position: absolute;
  width: 120px; height: 120px;
  top: 50%; left: 50%;
  margin: -60px 0 0 -60px;
  transform: rotate(45deg);
}
.isthis {
  width: 100%; height: 100%;
  transform: rotate(-45deg);
}
  .thisisscienceiguess,
  .andthisistoo,
  .thisistooofcourse {
    position: absolute;
    display: block;
    width: 100%; height: 100%;
    top: 0; left: 0;
    border-width: 4px;
    border-style: solid;
    border-radius: 100%;
    opacity: .9;
  }
  .thisisscienceiguess {
    border-color: #707c7d;
    animation: center 2s ease-in-out infinite;
  }
  .andthisistoo {
    border-color: #dd6822;
    animation: top 2s ease-in-out infinite;
  }
  .thisistooofcourse {
    border-color: #3bbfd6;
    animation: bottom 2s ease-in-out infinite;
  }

@keyframes center {
  0%   {transform: rotateY(0deg)}
  50%  {transform: rotateY(90deg)}
  100% {transform: rotateY(360deg)}
}
@keyframes top {
  0%   {transform: rotateY(0deg) rotateX(0deg)}
  50%  {transform: rotateY(90deg) rotateX(45deg)}
  100% {transform: rotateY(360deg) rotateX(0deg)}
}
@keyframes bottom {
  0%   {transform: rotateY(0deg) rotateX(0deg)}
  50%  {transform: rotateY(90deg) rotateX(-45deg)}
  100% {transform: rotateY(360deg) rotateX(0deg)}
}