#cursor {
  position: absolute;
  width: 20px;
  height: 20px;
  border: 2px solid #000;
  box-sizing: border-box;
  transition: 0.1s;
  transform: translate(-50%, -50%);
  border-radius: 50%;
  pointer-events: none;
}

#moon {
  position: absolute;
  width: 35px;
  height: 35px;
  border-radius: 50%;
  background-color: rgb(186, 186, 186);
  animation: rotate 3s linear infinite;
}

@keyframes rotate {
  0% {
    transform: rotate(0deg) translateX(80px);
  }
  100% {
    transform: rotate(360deg) translateX(80px);
  }
}

First of all, I’m really sorry that there might be an error in the question using the translator.

enter image description here

I’d like to rotate ‘moon’ around ‘cursor’.

‘cursor’ has ‘translate (-50%, -50%); and ‘moon’ has also tried to apply this but failed.

I think that’s because ‘translateX’ has already been applied.

Is there a way to apply ‘translate (-50%, -50%) to a target that already has ‘translateX’?

I’ve been searching for a couple of hours for a way to fix this, but I couldn’t find it. (This is probably because I didn’t search correctly, but I did my best.)

I’ve tried everything I can to get it done, but it hasn’t had much of an effect.

Please help. This is my first question, so please let me know if there’s anything that goes against the rules.

Thank you