Transform: translate Doesn't work in React / SASS [duplicate] - html

Question

This question already has an answer here:
How to keep origin in center of image in scale animation?
(1 answer)
Closed 1 year ago.
I couldn't find a solution for this simple problem, I changed the display to flex and block, that didn't work either. It works on parent element. But I guess there is something I can't see on this code.
.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);
}
}
the transform here, doesn't work. I know how to center, my question is why doesn't the transform property work. this is react with Sass by the way. Everything else works in the code, just the transform has this weird problem. here is the component.
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;

Answer 1

It's because the animation is overriding the transform property. This is one limitation of transform. a solution is to add the translate(-50%, -50%) to the animation keyframes.
#keyframes Rotation {
from {
transform: translate(-50%, -50%) rotate(0);
}
to {
transform: translate(-50%, -50%) rotate(360deg);
}
}