Она должна быть на одной орбите, как мне исправить Луну? Как сделать день и ночь динамичными над горизонтом? ⇐ CSS

[Anonymous]

Я пытаюсь изучить HTML/JS/CSS, но не могу это исправить самостоятельно.

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

@keyframes spin {
from {
transform: rotate(0turn) translateY(-1150px) translateY(50%) rotate(1turn)
}
to {
transform: rotate(1turn) translateY(-1150px) translateY(50%) rotate(0turn)
}
}

.avatar1 {
animation: spin 5s infinite linear;
}

/* Sun */

.avatar1 {
display: block;
width: 180px;
margin: calc(50% - 25px) auto 0;
border-radius: 50%;
overflow: hidden;
transform-origin: center -300px;
}

.avatar2 {
animation: spin 5s infinite linear;
animation-delay: 2.5s;
}

/* Not Sun */

.avatar2 {
display: block;
width: 180px;
margin: calc(50% - 25px) auto 0;
border-radius: 50%;
overflow: hidden;
transform-origin: center -300px;
}

/* Контейнер */

.path {
width: 450px;
height: 300px;
padding: 20px;
margin: 960px auto;
border-radius: 50%;
}

/* Убираем прокрутку */

.noscroll {
position: fixed;
width: 100%;
height: 100%;
overflow: hidden;
}

.noscroll::-webkit-scrollbar {
display: none;
}

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

[img]sun1.png[/img]
[img]moon1.png[/img]

Я пытался изменить такие переменные, как поля, источник преобразования, отступы и т. д. это, но это не дало никакого результата.
Какие переменные я могу изменить, чтобы изменить орбиту Луны? Может быть, мне нужно вставить какие-нибудь формулы в эти переменные?

Подробнее здесь: https://stackoverflow.com/questions/792 ... ic-day-and