变换旋转不按预期旋转多次

Question

我在使 SVG 组旋转多次时遇到问题。如果我指定 2520 度，我希望它旋转七次，就像这里对 HTML 和 SVG 元素所做的那样。

 <!DOCTYPE html>
    <html>
    
    <head>
      <style type="text/css">
        .spin {
          width: 100px;
          height: 100px;
          background: red;
        }
    
        .spin:hover {
          transform: rotate(2520deg);
          transition: transform 3s ease-out;
        }
        
        rect {
          width: 100px;
          height: 100px;
          background: red;
        }
    
        g:hover {
          transform: rotate(2520deg);
          transform-origin: 50px 50px;
          transition: transform 3s ease-out;
        }
      </style>
    </head>
    
    <body>
      <div class="spin">
    
      </div>
      <svg>
        <g>
          <rect height="100" width="100" fill="blue" />
        </g>
      </svg>
    </body>
    </html>

我在一个 React 项目中，在 CodePen 或诸如此类的东西中 post 有点复杂。在我的项目中，无论我在变换属性.我认为这在某些情况下称为短轮换？就像它使用 360 度的模数，所以它旋转到 x / 360 的其余部分。因此，如果我说旋转（2520 度），它似乎根本不会旋转，因为 2520 % 360 为零。

为什么我的项目中的这种行为与这些示例中的行为不同？我什至不知道从哪里开始，但拆除这个东西以隔离行为会很乏味，除非那里有明显的东西。我在哪里可以看？提前致谢。

Answer 1

试试这样的东西：

g:hover {
  animation: 1s 3 spin;
}
@keyframes spin {
  0% {
    transform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

Answer 2

这实际上是因为我覆盖了另一个看起来像这样的转换规则：

transform: scale(1);

我认为它会产生那样的结果是没有意义的，但这就是它在多个浏览器中所做的。

我通过将覆盖规则设置为：

解决了这个问题

transform: none;

变换旋转不按预期旋转多次

transform rotate not rotating multiple times as expected

css

svg

css-transforms