Transform: translate Doesn't work in React / SASS

Question

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;

It actually works, are you shure about the values -50%? Do you have the full code with the Rototation keyframes? — Andre Sampaio, Mar 02 '21 at 11:56
I have, but why does it matter? it's just simple 360deg rotating animation, everything in the code works just not transform. it's not centered — İlker, Mar 02 '21 at 11:59
okay, so.. I stopped the animation and it worked.. But I need the animation though.. — İlker, Mar 02 '21 at 12:05
@AndreSampaio I just added the animation as well.. When I stop the animation, translate is working. — İlker, Mar 02 '21 at 12:10
I see, the transforms in the animation are overriding the transform on the div. Maybe creating a parent div and using there might work. I'll test it out. — Andre Sampaio, Mar 02 '21 at 12:11
posted an answer that confirms your suspicions Andre :) I wish there was a more elegant solution to this problem — George, Mar 02 '21 at 12:15

score 2 · Accepted Answer · answered Mar 02 '21 at 12:13

2

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);
  }
}

answered Mar 02 '21 at 12:13

George

1,706
1
11
12

Thanks. So if there is an animation, the other transform, rotate or scale functions in the code wont work?? – İlker Mar 02 '21 at 12:17
not necessarily if there's an animation. the transform property only accepts one value which can't be added to so you need to specify all transforms in one. you cannot do `transform: translate()` then another `transform: scale()` or something – George Mar 02 '21 at 12:22

Transform: translate Doesn't work in React / SASS

1 Answers1