Angular 4实现图片按45度步长旋转的方案

嘿，这个需求其实很容易实现，关键是要跟踪图片当前的旋转角度，而不是每次点击都固定转45度。我给你一套完整的解决方案，包你点击多少次都能持续生效：

第一步：优化HTML结构 #

先给元素加上可识别的标识，方便JavaScript获取和操作：

<div>
  <img id="rotatable-img" src="/assets/img1.png" alt="可旋转图片">
</div>
<div>
  <button id="rotate-left">rotate left 45</button>
  <button id="rotate-right">rotate right 45</button>
</div>

第二步：编写JavaScript逻辑 #

核心思路是用一个变量保存当前的旋转角度，每次点击按钮时更新这个角度，再把新角度应用到图片的transform属性上：

// 初始化当前旋转角度，默认是0度
let currentRotation = 0;

// 获取图片和按钮元素
const img = document.getElementById('rotatable-img');
const leftBtn = document.getElementById('rotate-left');
const rightBtn = document.getElementById('rotate-right');

// 左旋转按钮点击事件：每次在当前角度基础上减45度
leftBtn.addEventListener('click', () => {
  currentRotation -= 45;
  img.style.transform = `rotate(${currentRotation}deg)`;
});

// 右旋转按钮点击事件：每次在当前角度基础上加45度
rightBtn.addEventListener('click', () => {
  currentRotation += 45;
  img.style.transform = `rotate(${currentRotation}deg)`;
});

为什么这样能持续生效？ #

如果直接写img.style.transform = 'rotate(-45deg)'，每次点击都会把图片重置到初始状态再转45度，根本无法累积旋转效果。而通过currentRotation变量跟踪当前角度，每次点击都在原有角度基础上加减45度，再重新设置transform，就能实现持续按步长旋转的效果，不管点击多少次都能正确累加角度。

可选优化：添加平滑过渡动画 #

如果想让旋转过程更丝滑，可以给图片加一点CSS过渡效果：

#rotatable-img {
  transition: transform 0.3s ease;
}

这样每次旋转都会有0.3秒的平滑过渡，用户体验会更好。

内容的提问来源于stack exchange，提问作者John Theoden