Build a Moon Orbit - Build a Moon Orbit

HTML-CSS
1

Tell us what’s happening:

I completed the test, but I found the rotation is off from the earth, it rotates around the bottom right area, do you know why? I tried the change the translate % but not working. Thanks.

Your code so far

<!-- file: index.html -->
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8">
    <link rel="stylesheet" href="styles.css">
    <title>Moon Orbit</title>
</head>

<body>

<div class="space">

<div class="earth"></div>

<div class="orbit">

<div class="moon"></div>

</div>

</div>


</body>

</html>

/* file: styles.css */
body{
height: 100vh;
display: flex;

justify-content: center;

align-items: center;
background-color: black;
}

.space{
  height: 200px;
width: 200px;
  position: relative;
  
}

.earth{
  height: 100px;
width: 100px;
  position: absolute;
top: 50%;
left:50%;
        border-radius: 50%;
       background-color: rgb(82, 82, 228);

transform: translate(-50%, -50%);

}

.orbit{
height: 200px;
width: 200px;
position: absolute;
top: 50%;
left:50%;
border:2px solid rgb(231, 58, 58);
border-radius: 50%;
transform: translate(-50%, -50%);
animation: orbit 5s linear infinite;
}

.moon{
height: 30px;
width: 30px;
position: absolute;
top: 0;
left:50%;
border:2px solid black;
border-radius: 50%;
background-color: rgb(184, 179, 179);
transform: translate(-50%);

}


@keyframes orbit{

0%{transform:rotate(0deg) translate(-50%, -50%);}
100%{transform:rotate(360deg) translate(-50%, -50%);}

}

Your browser information:

User Agent is: Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/142.0.0.0 Safari/537.36 Edg/142.0.0.0

Challenge Information:

Build a Moon Orbit - Build a Moon Orbit

2

I was able to fix your issue by removing top and left in .orbit. remove the background color and it seems to work.