Сохранение центрирования нескольких элементов div при использовании ключевых кадров для перемещения по орбите ⇐ CSS

[Anonymous]

За последние несколько дней я изучил основы CSS и HTML и пытался установить простую планетарную орбиту Земли вокруг Солнца. Однако мне не удалось выяснить, как установить среднюю точку анимации, чтобы «Земля» вращалась вокруг определенного расстояния от центра Солнца, которое также находится в центре страницы. Он вращается по орбите, только не в том месте. Мой код:

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

styles.css * {
margin: 0;
padding: 0;
}

.container {
width: 100vw;
height: 100vh;
position: relative;
display: flex;
justify-content: center;
;
align-items: center;
background: black;
}

.container #sun {
position: absolute;
width: 200px;
height: 200px;
border-radius: 50%;
background: yellow;
box-shadow: 0 0 3em white;
s
}

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

.container #earth {
position: absolute;
border-radius: 50%;
background-color: blue;
top: 50%;
left: 50%;
width: 25px;
height: 25px;
transform-origin: -150px 0;
animation: orbit 2.5s Linear Infinite;
}

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

Document

Также попробовал использовать лунный контейнер, как я видел в другом сообщении о переполнении стека, но он все равно не работает



Подробнее здесь: https://stackoverflow.com/questions/798 ... s-to-orbit