Заставить планеты следовать по своей орбите в HTML/CSS ⇐ CSS

[Anonymous]

Итак, я впервые работаю над проектом React (пока работаю только с HTML и CSS). Я пытаюсь создать солнечную систему, в которой планеты развиваются вокруг Солнца. В приведенный ниже фрагмент я включил только первую планету с ее орбитой. Солнце должно располагаться на расстоянии 50% от экрана. Я просто не могу понять, как совместить вращение планеты с центром Солнца. Ближе всего к решению проблемы я подошел, когда Меркурий следовал по своей орбите примерно половину оборота, а затем уходил на вторую орбиту. Вот как это выглядит сейчас:
позиция 1
позиция 2
Вот фрагмент моего кода:

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

И для App.css:

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

.sun {
--sun-left: calc(-10vw);
--sun-top: 50%;

height: 20vw;
width: 20vw;
position: fixed;
left: var(--sun-left);
top: var(--sun-top);
background-color: #f27500;
border-radius: 50%;
display: inline-block;
transform: translateY(-50%);
max-height: 350px;
max-width: 350px;
min-height: 150px;
min-width: 150px;
}
.mercury {
position: absolute;
top: 50%;
left: var(--sun-left);
width: 125px;
height: 125px;
background-color: rgb(255, 255, 255);
border-radius: 50%;

transform-origin: -0.5vw;

transform: rotate(0deg) translateX(280px);

animation: orbitMercury 10s linear infinite;
}

@keyframes orbitMercury {
0% {
transform: rotate(0deg) translateX(280px);
}
100% {
transform: rotate(360deg) translateX(280px);
}
}
.mercury_orbit {
position: fixed;
top: 50%;
left: calc(-280px);
width: 560px;
height: 560px;
background-color: transparent;
border: 1px solid rgb(255, 255, 255);
border-radius: 50%;
transform: translateY(-50%);
}

Я попробовал несколько подходов, таких как: присвоение положения солнца переменной и использование этой переменной для позиционирования ртути, использование различных единиц измерения начала преобразования, таких как vw, % и px.
Я попробовал несколько подходов, таких как: присвоение положения солнца переменной и использование этой переменной для позиционирования ртути, использование различных единиц измерения происхождения, таких как vw, % и px.
п>

Подробнее здесь: https://stackoverflow.com/questions/791 ... n-html-css