body {
    margin: 0;
    min-height: 100vh;
    background: #000;
    display: grid;
    place-items: center;
    perspective: 50em;
    perspective-origin: 50% calc(50% - 2em);
}

.container {
    position: relative;
    width: 10em;
    aspect-ratio: 1/1;
    position: relative;
    transform-style: preserve-3d;
    display: grid;
    place-items: center;
    transform: rotateY(30deg);
}

.origin {
    position: absolute;
    width: 3em;
    aspect-ratio: 1/1;
    border-radius: 50%;
    background-image: radial-gradient(circle at center,
            #57ff51, 50%,
            #000);
    transform: rotateY(-30deg);
}

.circle-vertical {
    position: absolute;
    width: 100%;
    height: 100%;
    border: .1em solid #57ff51;
    border-radius: 50%;
    animation: rotate-v 10s infinite linear;
}

.circle-horizontal {
    position: absolute;
    width: 100%;
    height: 100%;
    border: .1em solid #57ff51;
    border-radius: 50%;
    transform: rotateX(90deg);
    animation: rotate-h 10s infinite linear;
}

@keyframes rotate-v {
    to {
        transform: rotateY(360deg);
    }
}

@keyframes rotate-h {
    to {
        transform: rotateX(360deg);
    }
}