js实现div旋转
使用CSS transform 属性旋转div
通过JavaScript动态修改CSS的transform属性，可以实现div旋转效果。核心代码通过设置rotate()函数控制旋转角度，单位可以是deg（度）或rad（弧度）。
const div = document.getElementById('rotateDiv');
let angle = 0;
function rotateDiv() {
angle += 1;
div.style.transform = `rotate(${angle}deg)`;
requestAnimationFrame(rotateDiv);
}
rotateDiv();通过CSS动画实现旋转
结合CSS的@keyframes和JavaScript触发动画，实现更流畅的旋转效果。CSS部分定义旋转动画，JavaScript控制动画的启停。
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.rotate {
animation: spin 2s linear infinite;
}const div = document.getElementById('rotateDiv');
div.classList.add('rotate');
// 停止旋转
// div.classList.remove('rotate');使用setInterval控制旋转速度
通过setInterval定时器精确控制旋转速度和方向。适合需要交互式控制的场景，如根据用户输入调整旋转。
const div = document.getElementById('rotateDiv');
let angle = 0;
const speed = 2; // 控制旋转速度
setInterval(() => {
angle = (angle + speed) % 360;
div.style.transform = `rotate(${angle}deg)`;
}, 16);响应鼠标事件的交互旋转
通过监听鼠标事件（如拖拽），将用户操作转换为旋转角度。适合需要用户交互的场景。
const div = document.getElementById('rotateDiv');
let isDragging = false;
let startAngle = 0;
let currentAngle = 0;
div.addEventListener('mousedown', (e) => {
isDragging = true;
startAngle = getAngle(e.clientX, e.clientY);
});
document.addEventListener('mousemove', (e) => {
if (!isDragging) return;
const angle = getAngle(e.clientX, e.clientY);
currentAngle += angle - startAngle;
startAngle = angle;
div.style.transform = `rotate(${currentAngle}deg)`;
});
document.addEventListener('mouseup', () => {
isDragging = false;
});
function getAngle(x, y) {
const rect = div.getBoundingClientRect();
const centerX = rect.left + rect.width / 2;
const centerY = rect.top + rect.height / 2;
return Math.atan2(y - centerY, x - centerX) * 180 / Math.PI;
}使用GSAP库实现高级动画
通过GSAP等动画库实现复杂旋转效果，如缓动、多轴旋转等。适合需要高级动画控制的场景。
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/3.11.4/gsap.min.js"></script>const div = document.getElementById('rotateDiv');
gsap.to(div, {
rotation: 360,
duration: 2,
repeat: -1,
ease: "power1.inOut"
});
