Auf Thema antworten

Beitrag

[QUOTE="chrisnoteto, post: 14019, member: 4794"]
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>
[/QUOTE]

Authentifizierung