css制作旋转按钮
使用CSS制作旋转按钮
通过CSS的transform属性和transition或animation可以实现按钮旋转效果。以下是两种常见方法：
方法一：悬停时旋转（使用transition）
.rotate-btn {
display: inline-block;
padding: 10px 20px;
background-color: #3498db;
color: white;
border: none;
border-radius: 5px;
cursor: pointer;
transition: transform 0.3s ease;
}
.rotate-btn:hover {
transform: rotate(360deg);
}方法二：持续旋转动画（使用animation）
.spin-btn {
display: inline-block;
padding: 10px 20px;
background-color: #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); }
}进阶技巧：控制旋转中心点
默认旋转中心是元素中心，可通过transform-origin调整：
.rotate-btn {
transform-origin: left center; /* 以左侧为中心旋转 */
}注意事项
- 旋转角度单位
deg表示度数，负值表示逆时针旋转 - 使用
transition时需要指定变化的属性名和持续时间 animation需要定义@keyframes规则- 考虑添加
will-change: transform优化性能（谨慎使用）
