js实现div旋转

使用 CSS transform 实现旋转

通过修改元素的 transform 属性实现旋转，JavaScript 动态控制旋转角度。

const div = document.querySelector('div');
div.style.transform = 'rotate(45deg)'; // 旋转45度

通过动画实现连续旋转

结合 CSS @keyframes 和 JavaScript 触发动画：

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

div.style.animation = 'spin 2s linear infinite'; // 持续旋转

动态交互旋转

监听事件（如鼠标移动）动态计算旋转角度：

document.addEventListener('mousemove', (e) => {
  const centerX = div.offsetLeft + div.offsetWidth / 2;
  const centerY = div.offsetTop + div.offsetHeight / 2;
  const angle = Math.atan2(e.clientY - centerY, e.clientX - centerX) * 180 / Math.PI;
  div.style.transform = `rotate(${angle}deg)`;
});

使用 requestAnimationFrame 平滑旋转

逐帧更新旋转角度实现平滑动画：

let angle = 0;
function rotate() {
  angle += 1;
  div.style.transform = `rotate(${angle}deg)`;
  requestAnimationFrame(rotate);
}
rotate();

注意事项

• 旋转中心默认是元素中心，可通过 transform-origin 调整（如 50% 50%）。
• 性能优化：避免频繁重排，优先使用 CSS 动画或 will-change: transform。