js实现转动
实现元素旋转的JavaScript方法
使用CSS transform属性
通过修改元素的transform属性实现旋转效果，可以结合transition添加平滑动画。
const element = document.getElementById('rotate-target');
let degree = 0;
function rotate() {
degree = (degree + 1) % 360;
element.style.transform = `rotate(${degree}deg)`;
requestAnimationFrame(rotate);
}
rotate();使用CSS动画
定义关键帧动画并通过JavaScript控制播放：
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}const element = document.getElementById('rotate-target');
element.style.animation = 'spin 2s linear infinite';使用Canvas绘图
在Canvas中实现图形旋转需要重绘逻辑：
const canvas = document.getElementById('rotate-canvas');
const ctx = canvas.getContext('2d');
let angle = 0;
function draw() {
ctx.clearRect(0, 0, canvas.width, canvas.height);
ctx.save();
ctx.translate(canvas.width/2, canvas.height/2);
ctx.rotate(angle * Math.PI/180);
ctx.fillRect(-50, -50, 100, 100);
ctx.restore();
angle = (angle + 1) % 360;
requestAnimationFrame(draw);
}
draw();使用WebGL实现3D旋转
通过Three.js等库简化WebGL旋转实现：
const scene = new THREE.Scene();
const camera = new THREE.PerspectiveCamera(75, window.innerWidth/window.innerHeight, 0.1, 1000);
const renderer = new THREE.WebGLRenderer();
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();性能优化建议
- 优先使用CSS动画处理简单旋转
- 复杂场景考虑使用Canvas或WebGL
- 使用
requestAnimationFrame代替setInterval - 对频繁操作的元素启用硬件加速：
.rotate-element {
will-change: transform;
transform: translateZ(0);
}以上方法可根据具体需求选择，CSS方案适合UI元素简单旋转，Canvas/WebGL适合复杂图形和游戏场景。
