我在React中创建了一个简单的旋转轮。
我有一个int值，输出轮子应该转多少度。
但问题是转型似乎抵消了这一点。
例如，旋转（1080度）应该做3个完整的顺时针旋转，但我的旋转轮做随机旋转次数，有时它只是在逆时针方向旋转。
我目前正在使用：transition: transform 5s ease-in-out

有没有办法保证旋转时顺时针旋转，或者至少让它做更多的旋转？
在SpinningWheel.js中

# sorry entire file is very big and so I just cut and paste these
# react hook
const [WheelSpinner, setWheelSpinner] = useState({
    transform: 0
});

# onClick turn
let wheel_value = (Math.random() * 8).toFixed(2);
setWheelSpinner({ transform: `rotate(${wheel_value}turn)` });

# return
<div className='wheel--spinner' style={WheelSpinner}>
      {elements.map((element) => (
         <div className='wheel--number' key={element.id} ref={(el) => (refs.current[element.id] = el)} style={element.style}>
               <span>{element.content}</span>
         </div>
      ))}
</div>

在SpinningWheel.css中：

.wheel--spinner {
    position: relative;
    width: 400px;
    height: 400px;
    background: #333;
    border-radius: 50%;
    overflow: hidden;
    transition: transform 5s ease-in-out;
}

我一直在研究“关键帧”之类的东西，但运气不真实的。或者至少看起来对我用50%，100%变换尝试过的基本效果没有帮助。
chatGPT提供了将“轻松进出”替换为“线性”作为解决方案，但我不认为这有帮助，我更喜欢平滑过渡的轻松进出。