also, the mercury is too close to the Sun, need to adjust the sizes somehow, and to adjust all the sizes properly we need to convert the space scene into 3d by simply using simple javascript for that, without any frameworks or third-paty libraries used. <!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
padding: 0;
background-color: black;
font-family: sans-serif;
}

#sun {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 100px;
height: 100px;
border-radius: 50%;
background-color: yellow;
}

.planet {
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: 20px;
height: 20px;
border-radius: 50%;
animation-timing-function: linear;
opacity: 0.8;
}

#mercury {
animation: orbit-mercury 88d linear infinite;
background-color: #ff0000;
transform: translateX(50px);
}

#venus {
animation: orbit-venus 224.7d linear infinite;
background-color: #ff6600;
transform: translateX(80px);
}

#earth {
animation: orbit-earth 365.25d linear infinite;
background-color: #3366cc;
transform: translateX(110px);
}

@keyframes orbit-mercury {
from {
transform: rotate(0deg) translateX(50px) rotate(0deg);
}
to {
transform: rotate(360deg) translateX(50px) rotate(-360deg);
}
}

@keyframes orbit-venus {
from {
transform: rotate(0deg) translateX(80px) rotate(0deg) translateY(8.7px) rotate(0deg);
}
to {
transform: rotate(360deg) translateX(80px) rotate(-360deg) translateY(8.7px) rotate(-1.26deg);
}
}

@keyframes orbit-earth {
from {
transform: rotate(0deg) translateX(110px) rotate(0deg) translateY(23.4px) rotate(0deg);
}
to {
transform: rotate(360deg) translateX(110px) rotate(-360deg) translateY(23.4px) rotate(-1.57deg);
}
}

input[type=range], label[for=time-factor] {
display: inline-block;
vertical-align: middle;
}

label[for=time-factor] {
margin-right: 10px;
}

#time-factor {
width: 150px;
}
</style>
</head>
<body>
<div id="solar-system">
<div id="sun"></div>
<div id="mercury" class="planet"></div>
<div id="venus" class="planet"></div>
<div id="earth" class="planet"></div>
</div>
<label for="time-factor">Time factor:</label>
<input type="range" id="time-factor" min="0.1" max="10" step="0.1" value="1000">
<script>
const timeFactorInput = document.getElementById('time-factor');
const mercury = document.getElementById('mercury');
const venus = document.getElementById('venus');
const earth = document.getElementById('earth');
const inclination = 7;
const perihelion = { mercury: 46, venus: 107, earth: 147 };
const aphelion = { mercury: 69, venus: 109, earth: 152 };
const eccentricity = { mercury: 0.21, venus: 0.01, earth: 0.02 };
const siderealPeriod = { mercury: 88, venus: 224.7, earth: 365.25 };
const orbitalPeriod = { mercury: 87.97, venus: 224.7, earth: 365.25 };
const planetAxisAngle = { mercury: 0.01, venus: 2.64, earth: 23.44 };

let lastTime = null;
let timeElapsed = 0;
let timeFactor = 1;

function updateTimeFactor() {
timeFactor = parseFloat(timeFactorInput.value);
}

timeFactorInput.addEventListener('change', updateTimeFactor);

function animate(now) {
if (!lastTime) {
lastTime = now;
}
const deltaTime = now - lastTime;
lastTime = now;

timeElapsed += deltaTime * timeFactor;
const mercuryAngle = ((timeElapsed / (orbitalPeriod.mercury * 24 * 60 * 60)) * 360) + ((360 / siderealPeriod.mercury) * timeElapsed) - (planetAxisAngle.mercury * inclination);
const venusAngle = ((timeElapsed / (orbitalPeriod.venus * 24 * 60 * 60)) * 360) + ((360 / siderealPeriod.venus) * timeElapsed) - (planetAxisAngle.venus * inclination);
const earthAngle = ((timeElapsed / (orbitalPeriod.earth * 24 * 60 * 60)) * 360) + ((360 / siderealPeriod.earth) * timeElapsed) - (planetAxisAngle.earth * inclination);

const mercuryPerihelion = perihelion.mercury * (1 + eccentricity.mercury);
const mercuryAphelion = perihelion.mercury * (1 - eccentricity.mercury);
const mercuryDistance = ((mercuryPerihelion - mercuryAphelion) / 2) + mercuryAphelion;
mercury.style.transform = 'rotate(' + mercuryAngle + 'deg) translateX(' + mercuryDistance + 'px) rotate(' + -mercuryAngle + 'deg)';

const venusPerihelion = perihelion.venus * (1 + eccentricity.venus);
const venusAphelion = perihelion.venus * (1 - eccentricity.venus);
const venusDistance = ((venusPerihelion - venusAphelion) / 2) + venusAphelion;
venus.style.transform = 'rotate(' + venusAngle + 'deg) translateX(' + venusDistance + 'px) rotate(' + -venusAngle + 'deg)';

const earthPerihelion = perihelion.earth * (1 + eccentricity.earth);
const earthAphelion = perihelion.earth * (1 - eccentricity.earth);
const earthDistance = ((earthPerihelion - earthAphelion) / 2) + earthAphelion;
earth.style.transform = 'rotate(' + earthAngle + 'deg) translateX(' + earthDistance + 'px) rotate(' + -earthAngle + 'deg)';

requestAnimationFrame(animate);
}

animate(0);
</script>
</body>
</html> don't use any backticks, call styles in old fashion by using " and +.