After trying various display settings like flex and block without success, I realized that the transform property was not working as expected. Despite centering elements successfully using other methods, the transform doesn't seem to have any effect on the code. This issue is occurring in a React component styled with Sass.
.planets {
display: flex;
height: 100vh;
}
.pluton-orbit {
display: inline-block;
width: 70rem;
height: 70rem;
border: 1px solid rgba(0, 0, 0, 0.219);
border-radius: 50%;
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50% , -50%);
z-index: 4;
animation: Rotation 5s linear infinite;
}
@keyframes Rotation {
from {
transform: rotate(0);
}
to {
transform: rotate(360deg);
}
}
In the given code snippet for a planets component, every style works perfectly except for the transform property. The inner workings of the transform remain unknown within this specific context. Below is the entire component written in React:
import React from "react";
const Planets: React.FC = () => {
return (
<div className="planets">
<div className="pluton-orbit">
<div className="pluton"></div>
</div>
<div className="neptun-orbit">
<div className="neptun"></div>
</div>
</div>
);
};
export default Planets;