SOURCE

<div class="canvas">
    <div class="circle circle--aqua"></div>
    <div class="circle circle--gold"></div>
    <div class="circle circle--tomato"></div>
    <div class="circle circle--aqua"></div>
    <div class="circle circle--gold"></div>
    <div class="circle circle--tomato"></div>
    <div class="circle circle--aqua"></div>
    <div class="circle circle--gold"></div>
    <div class="circle circle--tomato"></div>
    <div class="circle circle--aqua"></div>
    <div class="circle circle--gold"></div>
    <div class="circle circle--tomato"></div>
    <div class="circle circle--aqua"></div>
    <div class="circle circle--gold"></div>
    <div class="circle circle--tomato"></div>
    <div class="circle circle--aqua"></div>
    <div class="circle circle--gold"></div>
    <div class="circle circle--tomato"></div>
    <div class="circle circle--aqua"></div>
    <div class="circle circle--gold"></div>
    <div class="circle circle--tomato"></div>
</div>

$canvas-size: 500px;
$circle-size: 400px;
$circle-border: 4px;
$circles: 21;
$animation-duration: 8s;
$colors: aqua gold tomato;

body {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100vw;
    height: 100vh;
    overflow: hidden;
    background-color: #171723;
    transform-style: preserve-3d;
    perspective: 600px;
}

.canvas {
    position: relative;
    width: 100%;
    height: 100%;
    max-width: $canvas-size;
    max-height: $canvas-size;
    transform-style: preserve-3d;
    transform: rotateX(60deg);
}

.circle {
    position: absolute;
    box-sizing: border-box;
    border-width: $circle-border;
    border-style: solid;
    border-radius: 50%;
    will-change: transform;
}

@each $color in $colors {
    .circle--#{'' + $color} {
        border-color: $color;
    }
}

@keyframes circle-tilt {
    0%, 100% {
        transform: rotateY(0deg) rotateX(0deg);
    }
    15%, 45% {
        transform: rotateY(40deg) rotateX(0deg);
    }
    30%, 60% {
        transform: rotateY(-40deg) rotateX(0deg);
    }
    70% {
        transform: rotateY(0deg) rotateX(-60deg);
    }
    80% {
        transform: rotateY(0deg) rotateX(10deg);
    }
    90% {
        transform: rotateY(0deg) rotateX(-60deg);
    }
}

@for $circle from 1 through $circles {
    .circle:nth-child(#{$circle}) {
        $size: $circle-size - ($circle * ($circle-border * 4));
        $delay: 1s - (($circle) / $circles * 1s);

        top: calc(50% - #{$size / 2});
        left: calc(50% - #{$size / 2});
        width: $size;
        height: $size;
        animation: circle-tilt $animation-duration $delay infinite;
    }
}