处理键盘事件上的旋转三角形

<div id="triangle"></div>

#triangle {
  width: 0;
  height: 0;
  border-left: 50px solid transparent;
  border-right: 50px solid transparent;
  border-bottom: 100px solid red;
  position: absolute;
  top: 50%;
  left: 50%;
  transform-origin: center center;
  transform: translate(-50%, -50%);
}

document.addEventListener('keydown', function(event) {
  var triangle = document.getElementById('triangle');
  var rotation = parseFloat(triangle.style.transform.replace('rotate(', '').replace('deg)', '')) || 0;
  
  if (event.key === 'ArrowLeft') {
    rotation -= 10; // 逆时针旋转10度
  } else if (event.key === 'ArrowRight') {
    rotation += 10; // 顺时针旋转10度
  }
  
  triangle.style.transform = 'rotate(' + rotation + 'deg)';
});