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

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

本文关键字：顶部 位置 Javascript 何根      更新时间：2023-09-26

所以我有一个处于绝对位置的框。现在，我的目标是将一个角度作为用户的输入，并将该框移动到该角度。我的逻辑是取角度，将其转换为顶部和左侧的位置，使其相应地移动。但是由于像素差异，速度会发生变化。有其他方法的建议或帮助吗？此外，我将速度和角度作为用户的输入。

谢谢。

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

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

其语法为

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

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

-moz-transform: rotate(50deg);

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

您也可以使用此属性来翻译或移动元素

transform: translate( 50px, 50px);

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

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

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

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

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

看看这是否对您有帮助。

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)";
});
相关文章：