当前位置：首页 > JavaScript

js 实现角度旋转

2026-03-16 03:26:32JavaScript

使用 CSS transform 实现旋转

在 JavaScript 中可以通过修改元素的 transform 样式属性来实现旋转效果。CSS 的 rotate() 函数接受角度参数，单位为 deg。

const element = document.getElementById('target');
element.style.transform = 'rotate(45deg)';

使用 CSS 动画实现连续旋转

通过 CSS @keyframes 定义旋转动画，然后用 JavaScript 控制动画的播放。

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

const element = document.getElementById('target');
element.style.animation = 'spin 2s linear infinite';

使用 requestAnimationFrame 实现平滑旋转

通过 JavaScript 的 requestAnimationFrame 实现更精细的旋转控制。

let angle = 0;
const element = document.getElementById('target');

function rotate() {
  angle = (angle + 1) % 360;
  element.style.transform = `rotate(${angle}deg)`;
  requestAnimationFrame(rotate);
}

rotate();

使用 Canvas 绘制旋转对象

在 Canvas 中实现旋转需要先保存当前状态，旋转画布，绘制对象，然后恢复状态。

const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
let angle = 0;

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.save();
  ctx.translate(100, 100);
  ctx.rotate(angle * Math.PI / 180);
  ctx.fillRect(-50, -50, 100, 100);
  ctx.restore();
  angle = (angle + 1) % 360;
  requestAnimationFrame(draw);
}

draw();

使用 Three.js 实现 3D 旋转

在 3D 场景中实现物体旋转需要使用 Three.js 等 3D 库。

const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth / window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

const geometry = new THREE.BoxGeometry();
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
const cube = new THREE.Mesh(geometry, material);
scene.add(cube);

camera.position.z = 5;

function animate() {
  requestAnimationFrame(animate);
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
}

animate();

使用 GSAP 动画库实现旋转

GSAP 提供了更强大的动画控制功能，包括旋转动画。

const element = document.getElementById('target');
gsap.to(element, { 
  rotation: 360,
  duration: 2,
  repeat: -1,
  ease: "none"
});

旋转事件处理

为元素添加交互式旋转控制，例如通过鼠标移动控制旋转角度。

js 实现角度旋转

const element = document.getElementById('target');
let isDragging = false;
let startAngle = 0;
let currentAngle = 0;

element.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;
  startAngle = angle;
  element.style.transform = `rotate(${currentAngle}deg)`;
});

window.addEventListener('mouseup', () => {
  isDragging = false;
});

function getAngle(x, y) {
  const rect = element.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;
}