当前位置：首页 > JavaScript

js 实现旋转

2026-03-13 16:06:12JavaScript

使用 CSS transform 实现旋转

在 JavaScript 中可以通过修改元素的 style.transform 属性实现旋转效果。旋转的核心是使用 rotate() 函数，参数可以是角度（deg）或弧度（rad）。

// 获取元素
const element = document.getElementById('target');

// 旋转45度
element.style.transform = 'rotate(45deg)';

// 动态旋转（随时间变化）
let angle = 0;
setInterval(() => {
  angle += 1;
  element.style.transform = `rotate(${angle}deg)`;
}, 16);

使用 CSS 动画实现平滑旋转

通过定义 @keyframes 动画规则，可以实现更流畅的自动旋转效果：

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

.rotating-element {
  animation: spin 2s linear infinite;
}

JavaScript 动态添加/移除动画类：

element.classList.add('rotating-element');
// 停止旋转
element.classList.remove('rotating-element');

三维空间旋转

使用 rotateX(), rotateY(), rotateZ() 可以实现三维旋转，需配合 perspective 属性：

element.style.transform = 'perspective(500px) rotateX(30deg) rotateY(45deg)';

矩阵变换实现复杂旋转

对于需要精确控制的场景，可以使用 matrix() 或 matrix3d()：

// 2D旋转矩阵示例
const angle = Math.PI/4; // 45度
const cos = Math.cos(angle);
const sin = Math.sin(angle);
element.style.transform = `matrix(${cos}, ${sin}, ${-sin}, ${cos}, 0, 0)`;

性能优化建议

使用 will-change 属性提升动画性能：

element.style.willChange = 'transform';

优先使用 requestAnimationFrame 而非 setInterval 实现动画循环：

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

旋转中心点控制

通过 transform-origin 属性可以改变旋转的轴心点：

element.style.transformOrigin = '30% 60%';

检测旋转角度

获取当前旋转角度（需解析 transform 矩阵）：

js 实现旋转

const style = window.getComputedStyle(element);
const matrix = style.transform.match(/^matrix\((.+)\)$/);
if (matrix) {
  const values = matrix[1].split(', ');
  const a = values[0];
  const b = values[1];
  const angle = Math.round(Math.atan2(b, a) * (180/Math.PI));
}

标签: js