如何用JavaScript和CSS transform属性实现按任意键时圆形移动20px并旋转180度？

下面是一套直接可用的实现方案，用HTML+CSS+JavaScript就能完成需求：

1. HTML结构 #

先创建一个作为目标的圆形元素：

<div id="target-circle"></div>

2. CSS样式 #

设置圆形的基础样式，同时添加过渡动画让移动和旋转更平滑：

#target-circle {
  width: 100px;
  height: 100px;
  background-color: #4285F4;
  border-radius: 50%;
  /* 开启过渡，让变换效果平滑过渡 */
  transition: transform 0.3s ease;
  /* 初始居中定位 */
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
}

3. JavaScript逻辑 #

监听全局键盘按下事件，累计移动距离和旋转角度，每次按键更新元素的变换属性：

// 获取目标圆形元素
const circle = document.getElementById('target-circle');

// 维护当前的移动位置和旋转角度
let currentX = 0;
let currentRotation = 0;

// 监听任意键盘按键按下事件
document.addEventListener('keydown', () => {
  // 每次按键沿X轴移动20px（要改方向的话可以换成Y轴）
  currentX += 20;
  // 每次按键旋转180度
  currentRotation += 180;
  
  // 更新元素的变换属性
  circle.style.transform = `translate(-50%, -50%) translateX(${currentX}px) rotate(${currentRotation}deg)`;
});

关键细节说明 #

• 用transition属性实现平滑的动画过渡，避免变换效果生硬
• 通过变量currentX和currentRotation累计每次按键的变化量，确保每次操作都是在上一次状态的基础上更新
• 如果需要改为上下移动，只需把currentX换成currentY，对应translateY即可

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