js实现旋转效果
使用 CSS transform 实现旋转
通过 CSS 的 transform 属性配合 rotate() 函数可以轻松实现旋转效果。JavaScript 主要用于动态控制旋转角度。
// 获取目标元素
const element = document.getElementById('rotateTarget');
// 设置初始旋转角度
let angle = 0;
// 每帧增加旋转角度
function rotate() {
angle += 1;
element.style.transform = `rotate(${angle}deg)`;
requestAnimationFrame(rotate);
}
// 启动旋转
rotate();使用 CSS animation 实现自动旋转
通过 CSS 关键帧动画实现更流畅的旋转效果，JavaScript 只需添加/移除类名控制动画启停。
@keyframes spinning {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
.spin {
animation: spinning 2s linear infinite;
}const element = document.getElementById('rotateTarget');
// 开始旋转
element.classList.add('spin');
// 停止旋转
element.classList.remove('spin');三维空间旋转
使用 rotateX(), rotateY(), rotateZ() 实现三维旋转效果，需设置 transform-style: preserve-3d。
const cube = document.getElementById('3dCube');
let x = 0, y = 0;
function animate() {
x += 0.5;
y += 0.5;
cube.style.transform = `rotateX(${x}deg) rotateY(${y}deg)`;
requestAnimationFrame(animate);
}
animate();拖拽交互旋转
通过鼠标事件实现拖拽控制旋转角度，适合图片查看器等场景。
const rotatable = document.getElementById('rotatable');
let isDragging = false;
let startAngle = 0;
let currentAngle = 0;
rotatable.addEventListener('mousedown', (e) => {
isDragging = true;
startAngle = getAngle(e.clientX, e.clientY);
});
window.addEventListener('mousemove', (e) => {
if (!isDragging) return;
const angle = getAngle(e.clientX, e.clientY);
currentAngle += angle - startAngle;
rotatable.style.transform = `rotate(${currentAngle}deg)`;
startAngle = angle;
});
window.addEventListener('mouseup', () => {
isDragging = false;
});
function getAngle(x, y) {
const rect = rotatable.getBoundingClientRect();
const cx = rect.left + rect.width/2;
const cy = rect.top + rect.height/2;
return Math.atan2(y - cy, x - cx) * 180 / Math.PI;
}性能优化建议
对于复杂旋转场景，使用 will-change: transform 提升性能
考虑使用 WebGL 的 Three.js 库实现高性能 3D 旋转
避免频繁的重排重绘，尽量使用 transform 和 opacity 属性
.optimized-rotate {
will-change: transform;
backface-visibility: hidden;
}
