C
chrisnoteto
New member
- Beiträge
- 2
- Punkte Reaktionen
- 0
hallo,
ich habe ein sonnensaystem erstellt (sonne, erde, mond) nun will ich den mars hinzufügen aber er dreht sich immer um einen punkt aber nicht um die sonnr wie kann ich das beheben?
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>
ich habe ein sonnensaystem erstellt (sonne, erde, mond) nun will ich den mars hinzufügen aber er dreht sich immer um einen punkt aber nicht um die sonnr wie kann ich das beheben?
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>