Анимация вращающегося круга ⇐ CSS

[Anonymous]

Я использую одно изображение среднего круга и 3 значка, вращающихся вокруг изображения среднего круга, теперь 3 значка не выравниваются одинаково, мне нужно, чтобы расстояние между ними было равным 120 градусам по 360 градусов для каждого значка. Я добавил javascript, html и стиль ниже. Пожалуйста, проверьте, это будет полезно для меня.
Прилагаемое изображение, введите описание изображения здесь
Заранее спасибо

Код: Выделить всё

 var stopCircle = document.getElementsByClassName('anima');
for (var i = 0; i < stopCircle.length; i++) {
if (stopCircle[i].matches(':hover')) {}
stopCircle[i].addEventListener("mouseover", function(event) {
document.getElementsByClassName('circle-arround-two-1')[0].classList.add("stopanima");
document.getElementsByClassName('circle-arround-two-2')[0].classList.add("stopanima");
document.getElementsByClassName('circle-arround-two-3')[0].classList.add("stopanima");
document.getElementsByClassName('circle-arround-two-4')[0].classList.add("stopanima");
});
stopCircle[i].addEventListener("mouseout", function(event) {
document.getElementsByClassName('circle-arround-two-1')[0].classList.remove("stopanima");
document.getElementsByClassName('circle-arround-two-2')[0].classList.remove("stopanima");
document.getElementsByClassName('circle-arround-two-3')[0].classList.remove("stopanima");
document.getElementsByClassName('circle-arround-two-4')[0].classList.remove("stopanima");
});
}

Код: Выделить всё

.slidercircle {
margin-left: 0px;
margin-top:0px;
width: 518px;
height: 622px;
}

.circle-middle {
display: flex;
align-items: center;
justify-content: center;
margin-left: 95px;
margin-top: 50px;
border-radius: 50%;
cursor: pointer;
position: absolute;
transition: 1s;
width: 400px;
}

.circle-one {
margin-left: 44px;
margin-top: 94px;
width: 250px;
height: 242px;
/* border: 2px solid #6b6b6b; */
position: absolute;
border-radius: 50%;
}

.circle-two {
width: 500px;
height: 500px;
/* border: 2px solid #6b6b6b;  */
position: absolute;
border-radius: 50%;
}

.circle-arround-two-1,
.circle-arround-two-2,
.circle-arround-two-3,
.circle-arround-two-4 {
cursor: pointer;
position: absolute;
border-radius: 50%;
top: 210px;
left: 210px;
display: flex;
align-items: center;
justify-content: center;
z-index:9;
}

.circle-arround-two-1 {
transform: rotate(45deg) translateX(250px) rotate(-45deg);
-webkit-animation: orbit3 100s linear infinite;
-moz-animation: orbit3 100s linear infinite;
-o-animation: orbit3 100s linear infinite;
animation: orbit2 100s linear infinite;
transition: 1s;
}

.circle-arround-two-2 {
transform: rotate(45deg) translateX(-250px) rotate(-45deg);
-webkit-animation: orbit3 100s linear infinite;
-moz-animation: orbit3 100s linear infinite;
-o-animation: orbit3 100s linear infinite;
animation: orbit3 100s linear infinite;
transition: 1s;
}

.circle-arround-two-3 {
transform: rotate(45deg) translateY(250px) rotate(-45deg);
-webkit-animation: orbit3 100s linear infinite;
-moz-animation: orbit3 100s linear infinite;
-o-animation: orbit3 100s linear infinite;
animation: orbit4 100s linear infinite;
transition: 1s;
}

.circle-arround-two-4 {
transform: rotate(45deg) translateY(-250px) rotate(-45deg);
-webkit-animation: orbit3 100s linear infinite;
-moz-animation: orbit3 100s linear infinite;
-o-animation: orbit3 100s linear infinite;
animation: orbit5 100s linear infinite;
transition: 1s;
}

.circle-arround-two-1 i:hover,
.circle-arround-two-2 i:hover,
.circle-arround-two-3 i:hover,
.circle-arround-two-4 i:hover {
-webkit-animation: rotate-center 0.6s ease-in-out both;
animation: rotate-center 0.6s ease-in-out both;
}

.circle-arround-two-1:hover,
.circle-arround-two-2:hover,
.circle-arround-two-3:hover,
.circle-arround-two-4:hover {
-webkit-box-shadow: 0px 0px 0px 4px rgba(255, 255, 255, 0.25);
-moz-box-shadow: 0px 0px 0px 4px rgba(255, 255, 255, 0.25);
box-shadow: 0px 0px 0px 4px rgba(255, 255, 255, 0.25);
}

@-webkit-keyframes rotate-center {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}

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

@keyframes rotate-center {
0% {
-webkit-transform: rotate(0);
transform: rotate(0);
}

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

@keyframes orbit2 {
from {
transform: rotate(0deg) translateX(180px) rotate(0deg);
}

to {
transform: rotate(360deg) translateX(180px) rotate(-360deg);
}
}

@keyframes orbit3 {
from {
transform: rotate(0deg) translateX(-180px) rotate(0deg);
}

to {
transform: rotate(360deg) translateX(-180px) rotate(-360deg);
}
}

@keyframes orbit4 {
from {
transform: rotate(0deg) translateY(180px) rotate(0deg);
}

to {
transform: rotate(360deg) translateY(180px) rotate(-360deg);
}
}

Код: Выделить всё

[url=#]

[img]https://www.freepikcompany.com/img/cards.svg[/img]

[/url]
[url=#]

[img]https://www.freepikcompany.com/img/cards.svg[/img]

[/url]
[url=#]

[img]https://www.freepikcompany.com/img/cards.svg[/img]

[/url]


[img]https://crop-circle.imageonline.co/crop-circle.png[/img]

Я пробовал использовать ключевой кадр, но не получилось

Подробнее здесь: https://stackoverflow.com/questions/787 ... -animation