Объект орбиты вращается по кругу [дубликат] ⇐ CSS

[Anonymous]

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

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

.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-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);
}
}

.stopanima {
animation-play-state: paused !important;
}

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

[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]

Ниже я добавил JavaScript, HTML и стиль. Пожалуйста, проверьте. Это будет полезно для меня.



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