js实现旋转
JavaScript 实现旋转的方法
使用 CSS transform 属性
通过 JavaScript 动态修改元素的 transform 属性实现旋转效果。以下是一个示例代码：
const element = document.getElementById('rotate-element');
element.style.transform = 'rotate(45deg)';使用 CSS 动画
结合 CSS @keyframes 和 JavaScript 控制动画的播放：
@keyframes spin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}const element = document.getElementById('rotate-element');
element.style.animation = 'spin 2s linear infinite';使用 Canvas API
在 Canvas 中实现图形旋转，需要使用 rotate() 方法：
const canvas = document.getElementById('canvas');
const ctx = canvas.getContext('2d');
ctx.rotate(Math.PI / 4); // 旋转45度
ctx.fillRect(50, 50, 100, 50);使用 requestAnimationFrame 实现平滑旋转
通过递归调用 requestAnimationFrame 实现连续旋转：
let angle = 0;
function rotate() {
const element = document.getElementById('rotate-element');
angle = (angle + 1) % 360;
element.style.transform = `rotate(${angle}deg)`;
requestAnimationFrame(rotate);
}
rotate();使用 WebGL 实现 3D 旋转
在 WebGL 中实现 3D 旋转需要矩阵变换：
const gl = document.getElementById('canvas').getContext('webgl');
const rotation = [0, 0, 0];
function updateRotation() {
rotation[0] += 0.01;
rotation[1] += 0.01;
// 应用旋转矩阵到着色器
}使用 GSAP 动画库
通过 GSAP 动画库实现更复杂的旋转效果：
gsap.to("#element", {
rotation: 360,
duration: 2,
repeat: -1,
ease: "none"
});使用 SVG 旋转
对于 SVG 元素，可以通过设置 transform 属性实现旋转：
const svgElement = document.getElementById('svg-element');
svgElement.setAttribute('transform', 'rotate(30, 50, 50)');注意事项
- 旋转角度单位：CSS 使用
deg（度），Canvas 和 WebGL 使用弧度 - 旋转中心点：默认是元素中心，可通过
transform-origin修改 - 性能考虑：大量元素旋转时建议使用 CSS 硬件加速
