.science {
    width: 120px; height: 120px;
    margin: 4rem auto 0 auto;
    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: #51ab4f;
    animation: center 2s ease-in-out infinite;
}
.andthisistoo {
    border-color: #0b446b;
    animation: top 2s ease-in-out infinite;
}
.thisistooofcourse {
    border-color: #50badf;
    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)}
}