html有四个按钮，第一个按钮默认不旋转，点击之后旋转，其他三个点击之后旋转，切换其他按钮后旋转停止

好的，这是一个比较简单的交互效果，可以使用JavaScript实现。以下是一个简单的实现方式：

HTML代码：

<button id="btn1" onclick="rotate(1)">Button 1</button>
<button id="btn2" onclick="rotate(2)">Button 2</button>
<button id="btn3" onclick="rotate(3)">Button 3</button>
<button id="btn4" onclick="rotate(4)">Button 4</button>

CSS代码：

button {
  width: 100px;
  height: 50px;
  transform-origin: center center;
  transition: transform 0.5s ease;
}

JavaScript代码：

let activeBtn = null;  // 当前激活的按钮

function rotate(btnIndex) {
  const btn = document.getElementById(`btn${btnIndex}`);
  if (activeBtn !== btn) {  // 判断点击的按钮是否与当前激活的按钮相同
    if (activeBtn) {
      activeBtn.style.transform = '';  // 停止旋转
    }
    activeBtn = btn;
  }
  btn.style.transform = `rotate(${btnIndex * 90}deg)`;  // 旋转按钮
}

实现效果：点击不同的按钮，按钮会旋转，切换到其他按钮时旋转会停止。其中第一个按钮默认不旋转，其他三个点击之后旋转。