SOURCE

<div class="body flat">
	<div class="container">
		<div class="item">
            <div class="content">1</div>
        </div>
		<div class="item">
            <div class="content">2</div>
        </div>
		<div class="item">
            <div class="content">3</div>
        </div>
		<div class="item">
            <div class="content">4</div>
        </div>
		<div class="item">
            <div class="content">5</div>
        </div>
		<div class="item">
            <div class="content">6</div>
        </div>
	</div>
</div>

.body {
    width: 800px;
    height: 800px;
}
.flat {
    transform: scaleY(0.375);
}
.container {
    margin: auto;
    width: 300px;
    height: 300px;
    border-radius: 50%;
    background: red;
    /* transform: scaleY(0.375); */
    position: relative;
    display: flex;
    justify-content: center;
    animation: rotation 4s linear infinite;
}

.item {
    position: absolute;
    top: -10px;
    height: 20px;
    width: 20px;
    transform-origin: center 160px;
}

.item .content {
    width: 100%;
    height: 100%;
    background: greenyellow;
}

.item:nth-child(1) {
    transform: rotate(0deg)
}

.item:nth-child(1) .content {
    transform: rotate(0deg)
}

.item:nth-child(2) {
    transform: rotate(60deg)
}

.item:nth-child(2) .content {
    transform: rotate(-60deg)
}

.item:nth-child(3) {
    transform: rotate(120deg)
}

.item:nth-child(3) .content {
    transform: rotate(-120deg)
}

.item:nth-child(4) {
    transform: rotate(180deg)
}

.item:nth-child(4) .content {
    transform: rotate(-180deg)
}

.item:nth-child(5) {
    transform: rotate(240deg)
}

.item:nth-child(5) .content {
    transform: rotate(-240deg)
}

.item:nth-child(6) {
    transform: rotate(300deg)
}

.item:nth-child(6) .content {
    transform: rotate(-300deg)
}

@keyframes rotation {
    0% {
        transform: rotate(0deg)
    }
    100% {
        transform: rotate(360deg)
    }
}