如何根据角度确定绝对的上下位置？ Java脚本

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

看看这是否对您有帮助。

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)";
});