点击不同的按钮，按钮会持续顺时针旋转，切换到其他按钮时旋转会停止并且按钮持续旋转至初始位置。其中第一个按钮默认不旋转，其他三个点击之后持续顺时针旋转。

你可以使用CSS3的动画来实现按钮的旋转效果，并通过JavaScript来控制按钮的状态和动画的播放。以下是一个简单的实现方案：

HTML代码：

<div class="button-group">
  <button class="button active" data-rotate="0">Button 1</button>
  <button class="button" data-rotate="90">Button 2</button>
  <button class="button" data-rotate="180">Button 3</button>
  <button class="button" data-rotate="270">Button 4</button>
</div>

CSS代码：

.button {
  width: 100px;
  height: 100px;
  border-radius: 50%;
  background-color: #ccc;
  color: #fff;
  font-size: 16px;
  text-align: center;
  line-height: 100px;
  cursor: pointer;
  transition: transform 0.3s ease;
  transform-origin: center center;
}

.button.active {
  animation: rotate 2s linear infinite;
}

@keyframes rotate {
  to {
    transform: rotate(360deg);
  }
}

JavaScript代码：

const buttons = document.querySelectorAll('.button');
let activeButton = buttons[0];

buttons.forEach(button => {
  button.addEventListener('click', () => {
    activeButton.classList.remove('active');
    button.classList.add('active');
    activeButton = button;
    const rotate = button.getAttribute('data-rotate');
    document.documentElement.style.setProperty('--rotate', `${rotate}deg`);
  });
});

解释一下代码：

1. HTML中的每个按钮都有一个`data-rotate`属性，用来存储它的旋转角度。

2. CSS中定义了一个`.button`类，表示按钮的样式，其中`transition`属性表示当按钮的`transform`属性改变时，需要过渡0.3秒，`transform-origin`属性表示按钮的变换中心为中心点。

3. CSS中定义了一个`@keyframes rotate`动画，表示按钮的顺时针旋转动画，其中`to`表示动画结束时的状态。

4. JavaScript中定义了`buttons`常量，表示所有的按钮，`activeButton`变量表示当前激活的按钮，初始值为第一个按钮。

5. JavaScript中给每个按钮添加了一个`click`事件监听器，当按钮被点击时，首先将当前激活的按钮的`active`类移除，然后将点击的按钮添加`active`类，将当前激活的按钮设置为点击的按钮，最后获取点击的按钮的`data-rotate`属性值，并将其设置为根元素（`html`）的`--rotate`变量值。

6. CSS中使用了`var(--rotate)`来引用根元素的`--rotate`变量，实现了按钮的旋转。

在CSS中使用了`var(--rotate)`来引用根元素的`--rotate`变量，这个变量的值会在JavaScript中动态修改，实现了按钮的旋转。每个按钮的旋转角度都存储在`data-rotate`属性中，点击按钮时会将其值设置为根元素的`--rotate`变量值，这样就能实现切换按钮时的旋转效果。