如何根据角度确定绝对顶部和左侧位置？ Javascript

Question

所以我有一个处于绝对位置的盒子。现在我的目标是将一个角度作为用户的输入并以该角度移动该框。我的逻辑是采用角度并将其转换为顶部和左侧定位，以便它相应地移动。但由于像素差异，速度会有所不同。对另一种方法有什么建议或对这个有帮助吗？另外，我将速度和角度作为用户的输入。

谢谢。

.box {
  height: 50px;
  width: 50px;
  position: absolute;
  top: 0px;
  left: 0px;
  background: #FCF4D9;
}

Answer 1

如果我正确理解你的问题，我认为你最好使用 css "transform" 属性，它允许你旋转或平移（又名移动）元素.

语法是

.box {
  transform: rotate(50deg);
}

但为了兼容性，您还应该始终添加

-moz-transform: rotate(50deg);

transform 属性按指示移动您的元素，而不影响它周围的任何其他元素。转换将从元素已由 "top" 和 "left" 属性定位的任何位置生效。

您还可以使用此属性来平移或移动元素

transform: translate( 50px, 50px);

会将元素向右移动 50 像素并向下移动 50 像素。这些属性可以结合使用：

transform: translate( 50px, 50px) rotate(50deg);

将移动元素然后旋转它，而

transform: rotate(50deg) translate(50px, 50px);

将首先旋转元素，然后相对于已应用的旋转向右和向下移动 50 像素。

Answer 2

看看this对你有没有帮助。

var applyButton = document.getElementById("apply");
applyButton.addEventListener("click",function(){
  var angle = parseFloat(document.getElementById('angle').value.trim() || "0");
  var box = document.getElementById("rotate-box");
  box.style['transform'] = "rotate("+angle+"deg)";
});

如何根据角度确定绝对顶部和左侧位置？ Javascript

How to determine the absolute top and left position according to an angle? Javascript

html

javascript

css

angle

box