<section class="circles-wrap">
        <div class="circles">
            <div class="block-circle">
                <div class="circle">
                    <img src="https://i.dlpng.com/static/png/7021522_preview.png" alt=""/>
                </div>
            </div>
            <div class="block-circle">
                <div class="circle">
                    <img src="https://i.dlpng.com/static/png/7021522_preview.png" alt=""/>
                </div>
            </div>
            <div class="block-circle">
                <div class="circle">
                    <img src="https://i.dlpng.com/static/png/7021522_preview.png" alt=""/>
                </div>
            </div>
            <div class="block-circle">
                <div class="circle">
                    <img src="https://i.dlpng.com/static/png/7021522_preview.png" alt=""/>
                </div>
            </div>
            <div class="block-circle">
                <div class="circle">
                    <img src="https://i.dlpng.com/static/png/7021522_preview.png" alt=""/>
                </div>
            </div>
            <div class="block-circle">
                <div class="circle">
                    <img src="https://i.dlpng.com/static/png/7021522_preview.png" alt=""/>
                </div>
            </div>
            <div class="block-circle">
                <div class="circle">
                    <img src="https://i.dlpng.com/static/png/7021522_preview.png" alt=""/>
                </div>
            </div>
            <div class="block-circle">
                <div class="circle">
                    <img src="https://i.dlpng.com/static/png/7021522_preview.png" alt=""/>
                </div>
            </div>
            <div class="block-circle">
                <div class="circle">
                    <img src="https://i.dlpng.com/static/png/7021522_preview.png" alt=""/>
                </div>
            </div>
            <div class="block-circle">
                <div class="circle">
                    <img src="https://i.dlpng.com/static/png/7021522_preview.png" alt=""/>
                </div>
            </div>
        </div>
    </section>
*{
  margin: 0;
}
body {
    overflow-x: hidden;
}

img {
    max-width: 100%;
    width: 100%
}

.circles-wrap {
    width: 100%;
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background-color: black
}

.circles {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    width: 600px;
    height: 600px;
    animation-name: rotation;
    animation-duration: 60s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
    z-index: 2
}

.block-circle {
    transform-origin: 100% 26px;
    transform: rotate(0deg);
    position: absolute;
    width: 300px;
    height: 70px;
    bottom: 0;
    top: 0;
    left: 0;
    margin: auto
}

.block-circle .circle {
    background: yellow;
    border: 1px solid black;
    width: 70px;
    height: 70px;
    border-radius: 50%;
}

.block-circle .circle{
    animation-name: circle;
    animation-duration: 60s;
    animation-iteration-count: infinite;
    animation-timing-function: linear;
}
.block-circle:nth-child(1) img{
  transform:rotate(0deg);
}
.block-circle:nth-child(2) img{
  transform:rotate(324deg);
}
.block-circle:nth-child(3) img{
  transform:rotate(288deg);
}
.block-circle:nth-child(4) img{
  transform:rotate(252deg);
}
.block-circle:nth-child(5) img{
  transform:rotate(216deg);
}
.block-circle:nth-child(6) img{
  transform:rotate(180deg);
}
.block-circle:nth-child(7) img{
  transform:rotate(144deg);
}
.block-circle:nth-child(8) img{
  transform:rotate(108deg);
}
.block-circle:nth-child(9) img{
  transform:rotate(72deg);
}
.block-circle:nth-child(10) img{
  transform:rotate(36deg);
}

.block-circle:nth-child(1) {
    transform: rotate(0deg);
}

.block-circle:nth-child(2) {
    transform: rotate(36deg);
}

.block-circle:nth-child(3) {
    transform: rotate(72deg);
}

.block-circle:nth-child(4) {
    transform: rotate(108deg);
}

.block-circle:nth-child(5) {
    transform: rotate(144deg);
}

.block-circle:nth-child(6) {
    transform: rotate(180deg);
}

.block-circle:nth-child(7) {
    transform: rotate(216deg);
}
.block-circle:nth-child(8) {
    transform: rotate(252deg);
}

.block-circle:nth-child(9) {
    transform: rotate(288deg);
}

.block-circle:nth-child(10) {
    transform: rotate(324deg);
}

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

    100% {
        transform: rotate(360deg);
    }
}

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

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.