css制作旋转按钮

使用CSS制作旋转按钮

通过CSS的transform属性和动画关键帧（@keyframes）可以实现按钮旋转效果。以下是两种常见方法：

方法1：悬停时旋转

通过:hover伪类触发旋转动画：

.rotate-button {
  padding: 10px 20px;
  background: #3498db;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.3s ease;
}

.rotate-button:hover {
  transform: rotate(360deg);
}

方法2：持续旋转动画

使用@keyframes实现无限旋转：

.continuous-rotate {
  padding: 10px 20px;
  background: #e74c3c;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  animation: spin 2s linear infinite;
}

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

方法3：点击触发旋转

通过JavaScript添加/移除类名控制旋转：

.click-rotate {
  padding: 10px 20px;
  background: #2ecc71;
  color: white;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  transition: transform 0.5s ease;
}

.click-rotate.active {
  transform: rotate(180deg);
}

document.querySelector('.click-rotate').addEventListener('click', function() {
  this.classList.toggle('active');
});

进阶技巧

1. 3D旋转效果：使用rotateX()或rotateY()实现空间旋转

   

   .rotate-3d:hover {
   transform: rotateY(180deg);
   }

2. 自定义旋转轴：

   .custom-axis {
   transform-origin: left center;
   transition: transform 0.4s;
   }
   .custom-axis:hover {
   transform: rotate(90deg);
   }

3. 步进动画：

   .step-rotate {
   animation: stepRotate 1s steps(8) infinite;
   }
   @keyframes stepRotate {
   to { transform: rotate(360deg); }
   }

注意事项：

• 考虑添加transform-style: preserve-3d实现更真实的3D效果
• 使用will-change: transform优化动画性能
• 对移动端设备注意添加-webkit-前缀兼容性