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;
}