当前位置：首页 > JavaScript

js 实现旋转

2026-04-05 10:28:47JavaScript

使用 CSS transform 实现旋转

在 JavaScript 中可以通过修改元素的 transform CSS 属性来实现旋转效果。基本语法如下：

element.style.transform = 'rotate(角度)';

角度单位可以是 deg（度数）或 rad（弧度）。例如旋转 45 度：

document.getElementById('myElement').style.transform = 'rotate(45deg)';

使用 CSS 动画实现平滑旋转

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

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

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

使用 requestAnimationFrame 实现精准控制

对于需要精确控制旋转过程的情况，可以使用 requestAnimationFrame：

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

三维旋转（3D 旋转）

使用 rotateX, rotateY, rotateZ 实现三维空间旋转：

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

旋转原点设置

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

element.style.transformOrigin = '50% 50%';  // 默认值，中心旋转
element.style.transformOrigin = '0 0';      // 左上角旋转

结合过渡效果

添加 transition 属性使旋转更平滑：

element.style.transition = 'transform 0.5s ease';
element.style.transform = 'rotate(180deg)';

使用 GSAP 动画库

GSAP 提供了更强大的动画控制能力：

gsap.to("#myElement", {rotation: 360, duration: 2, repeat: -1});

获取当前旋转角度

通过 getComputedStyle 可以获取当前旋转值：

js 实现旋转

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

标签: js