javascript - 如何在 JavaScript 中移动带方向的 div？

Question

我想移动 HMTL 中的一个元素。很简单。问题是元素应该以指定的 Angular 移动，例如 30° deg。我如何在 JavaScript 中(以及使用 CSS 旋转)做到这一点？

谢谢大家的回答。

Answer 1

如果我理解的很好，你可以使用Math.cos和Math.sin得到想要的向量的水平和垂直分量，然后增加top 和 left 属性:

(function() {
  var box = document.getElementById('box'),
      top = 0,
      left = 0,
      angle = 30 * Math.PI / 180, // 30 degrees
      speed = 1,
      deltaX = Math.cos(angle) * speed,
      deltaY = Math.sin(angle) * speed;
  setInterval(function() {
    box.style.top = (top += deltaY) + 'px';
    box.style.left = (left += deltaX) + 'px';
  }, 60);
})();

#box {
  height: 50px;
  width: 50px;
  position: relative;
  background: blue;
}

<div id="box"></div>