转换：翻译在 React / SASS 中不起作用 [重复]

Question

我找不到这个简单问题的解决方案，我将显示更改为 flex 和 block，但也没有用。它适用于父元素。但我想在这段代码中我看不到一些东西。

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

这里的转换不起作用。我知道如何居中，我的问题是为什么转换属性不起作用。顺便说一下，这是对 Sass 的反应。其他一切都在代码中工作，只是转换有这个奇怪的问题。这是组件。

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

这是因为动画覆盖了transform 属性。这是transform 的限制之一。一种解决方案是将translate(-50%, -50%) 添加到动画关键帧中。

@keyframes Rotation {
  from {
    transform: translate(-50%, -50%) rotate(0);
  }
  to {
    transform: translate(-50%, -50%) rotate(360deg);
  }
}