当前位置：首页 > JavaScript

js实现旋转

2026-02-01 19:22:24JavaScript

使用 CSS transform 实现旋转

通过 CSS 的 transform 属性结合 rotate() 函数可以实现元素的旋转效果。JavaScript 用于动态控制旋转角度。

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

function rotateElement() {
  angle += 10;
  element.style.transform = `rotate(${angle}deg)`;
  requestAnimationFrame(rotateElement);
}

rotateElement();

使用 Canvas API 旋转绘图

Canvas 的 rotate() 方法可以实现画布内容的旋转，需注意旋转是基于画布原点（默认左上角）的。

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

function draw() {
  ctx.clearRect(0, 0, canvas.width, canvas.height);
  ctx.save();
  ctx.translate(canvas.width/2, canvas.height/2);
  ctx.rotate(rotation);
  ctx.fillStyle = 'red';
  ctx.fillRect(-50, -50, 100, 100);
  ctx.restore();
  rotation += 0.01;
  requestAnimationFrame(draw);
}

draw();

使用 WebGL 实现 3D 旋转

通过 Three.js 等库或原生 WebGL 可实现更复杂的 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() {
  cube.rotation.x += 0.01;
  cube.rotation.y += 0.01;
  renderer.render(scene, camera);
  requestAnimationFrame(animate);
}

animate();

使用 GSAP 动画库实现平滑旋转

GSAP 提供了更强大的动画控制能力，适合复杂的旋转动画需求。

gsap.to("#target", {
  rotation: 360,
  duration: 2,
  repeat: -1,
  ease: "power1.inOut"
});

响应设备陀螺仪实现物理旋转

通过 DeviceOrientation API 可以让旋转效果响应设备实际运动。

window.addEventListener('deviceorientation', (event) => {
  const beta = event.beta;  // -180到180
  const gamma = event.gamma; // -90到90
  document.getElementById('compass').style.transform = 
    `rotate(${gamma * 2}deg) rotate3d(1,0,0,${beta * 2}deg)`;
});

每种方法适用于不同场景：CSS 变换适合简单 UI 元素，Canvas 适合 2D 图形处理，WebGL 适合 3D 场景，GSAP 适合复杂动画，设备陀螺仪则适合交互式应用。

js实现旋转