Sonnensystem Animationsproblem

chrisnoteto · 16.06.2023

hallo,
ich habe ein Sonnensystem nach einem tutorial programmiert. Nun will ich den Mars hinzufügen aber der Mars dreht sich um einen punkt der nicht die sonne ist habt ihr eine Lösung ?

Quellcode:

<!DOCTYPE html>
<head>
<style>
body {
margin: 0;
height: 100vh;
display: flex;
align-items: center;
justify-content: center;
background-color: black;
overflow: hidden;
}
.container {
font-size: 10px;
width: 40em;
height: 40em;
position: relative;
}
.sun {
position: absolute;
top: 15em;
left: 15em;
width: 10em;
height: 10em;
background-color: yellow;
border-radius: 50%;
box-shadow: 0 0 3em orangered;
}
.mars,
.earth,
.moon {
position: absolute;
border-style: solid;
border-color: white
transparent
transparent
transparent;
border-width: 0.1em 0.1em 0.0;
border-radius: 50%
}
.earth {
top: 5em;
left: 5em;
width: 30em;
height: 30em;
animation: orbit 36.5s
linear infinite;

}
.moon {
top: 0;
right: 0;
width: 8em;
height: 8em;
animation: orbit 2.8s
linear infinite;
}

.mars {
top: 0em;
left: 0em;
width: 60em;
height: 60em;
animation: orbit 50.5s
linear infinite;
}
.earth::before,
.mars::before,
.moon::before {
content: '';
position: absolute;
border-radius: 50%;
}
.earth::before {
top: 2.8em;
right: 2.8em;
width: 3em;
height: 3em;
background-color: aqua;
}
.moon::before {
top: 0.8em;
right: 0.2em;
width: 1.2em;
height: 1.2em;
background-color: silver;
}
.mars::before {
top: 1.4em;
right: 1.4em;
width: 1.8em;
height: 1.8em;
background-color: rgb(230, 125, 65);
}
@keyframes orbit {
to {
transform: rotate(360deg);
}
}
</style>
</head>
<body>
<div class="container">
<div class="sun"></div>
<div class="earth">
<div class="moon"></div>

</div>
<div class="mars"></div>

</div>
</body>
</html>

Sempervivum · 16.06.2023

Interessante Aufgabe, denn ein Nebenhobby von mir ist die Astronomie.
Solche Animationen können knifflig sein und erfordern ein gewisses Maß an räumlichem Vorstellungsvermögen aber auch die Anwendung geeigneter Hilfsmittel. Das ist im wesentlichen der HTML-Inspektor, Du kannst dich darüber hier informieren:
https://wiki.selfhtml.org/wiki/Grundlagen/Webprojekte/testen#Arbeiten_mit_dem_Seiteninspektor
Damit kannst Du dir ein Bild verschaffen, wie die einzelnen Elemente aussehen, wie sie angeordnet sind und sich bewegen. Versuche das zunächst mal und wenn Du nicht zum Ziel kommst, melde dich wieder.

Edit: Du schreibst, dass Du den Code aus einem Tutorial hast und um Mars erweitert. Hat der Tutor denn da gar nicht erklärt, was er da macht und wie es funktioniert?