造型如何反应圆滑的旋转木马的箭头？

<div class="carousel-arrow"></div>

.carousel-arrow {
  width: 50px;
  height: 50px;
  background-image: url('arrow.png'); /* 替换为你的箭头图片 */
  background-size: cover;
  transition: transform 0.5s ease-in-out; /* 缓动效果 */
}

const arrow = document.querySelector('.carousel-arrow');

function rotateArrow(degrees) {
  arrow.style.transform = `rotate(${degrees}deg)`;
}

// 假设我们有一个按钮来触发旋转
document.getElementById('rotateButton').addEventListener('click', () => {
  let degrees = 0;
  const interval = setInterval(() => {
    degrees += 10;
    rotateArrow(degrees);
    if (degrees >= 360) {
      clearInterval(interval);
      degrees = 0; // 重置角度以实现连续旋转
    }
  }, 50);
});