考虑下面的jQuery示例。

$(function() {
  $("#thetaRange").on("input", function() {
    var angle = $(this).val() + "deg";
    $(".angle").html(angle);
    $(".person").css("transform", "rotate(" + angle + ")");
  });
});

.viewspace {
  width: 100%;
  height: 240px;
}

.person {
  width: 100px;
  height: 150px;
  background: #eef;
  transform: rotate(0deg)
}

.angle {
  width: 55px;
  display: inline-block;
  text-align: right;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="viewspace">
  <div class="person">
  </div>
</div>
<label for="angleSlider" class="form-label">Rotation Angle</label>
<input type="range" class="form-range w-75" id="thetaRange" min="-180" max="180" value="0" />
<span class="angle">0deg</span>

这将根据input事件上的Range Input的值旋转元素。

您的想法是正确的，但您需要做一些更改才能使其成为有效的JavaScript。
（尽管将问题标记为jQuery，但您没有在问题中使用jQuery，因此我不会在答案中使用jQuery。
您的代码"rotate(angle deg)"将transform属性设置为字面上的单词“angle”，而不是包含您想要的Angular 编号。要包含Angular 数，您可以使用JavaScript的字符串插值功能，该功能将文本与变量值组合在一起：rotate(${angle}deg)注意反引号```的使用，它激活了字符串插值特性。您可以在MDN上的指南中阅读有关此功能的更多信息：文本或Template literals中的表达式。
此外，您需要使用.value来访问输入或滑块对象的数值。我用const angle = thetaRange.value来做这个。您可以看到更多在MDN上访问输入值的示例，例如在的参考页面上。
最后，您需要添加事件侦听器，以便在文本输入或滑块更改时触发rotatePerson函数。如果你还没有这些，你可以用下面的代码添加它们：

const thetaRange = document.getElementById("thetaRange");
const thetaInput = document.getElementById("thetaInput");
thetaRange.addEventListener("input", () => rotatePerson());
thetaInput.addEventListener("input", () => rotatePerson());

把它们放在一起：

const person = document.getElementById("person")
const thetaRange = document.getElementById("thetaRange")
const thetaInput = document.getElementById("thetaInput")

// Adding the event listeners to make it rotate when the slider or input changes
thetaRange.addEventListener("input", () => rotatePerson())
thetaInput.addEventListener("input", () => rotatePerson())

// Function that sets the rotation
function rotatePerson() {
  const angle = thetaRange.value
  person.style.transform = `rotate(${angle}deg)`
}

<form>
  <div><label for="angleSlider" class="form-label">Rotation Angle</label></div>
  <input type="range" class="form-range w-75" id="thetaRange" min="-180" max="180" value="0"
        oninput="this.form.thetaInput.value=this.value" />
  <input type="number" id="thetaInput" min="-180" max="180" value="0"
        oninput="this.form.thetaRange.value=this.value" />
</form>

<!-- Placeholder for the person element -->
<div id="person" style="background: linear-gradient(to right, yellow, red); height: 100px; width: 200px"></div>

^单击运行代码片段以查看它的实际效果！
（欢迎来到Stack Overflow！别忘了对任何对你有用的答案投赞成票和/或标记为接受。

您提供的代码片段几乎是正确的，但在JavaScript代码的最后一行中存在一些问题。以下是更正后的版本和解释：

function rotatePerson() {
    const person = document.getElementById("person");
    var angle = document.getElementById("thetaRange").value; // Get the value of the angle
    person.style.transform = "rotate(" + angle + "deg)"; // Concatenate the angle variable into the transform property
}

说明：
1.rotatePerson函数使用getElementById选择ID为“person”的元素，并将其分配给person变量。
**2.**接下来，使用getElementById并访问value属性，从ID为thetaRange的元素中获取Angular 的值。此值表示滑块上选定的当前Angular 。
**3.**最后，代码将person元素的style.transform属性设置为rotate(" + angle + "deg)。这将使用从滑块获得的angle值（以度为单位）动态地将旋转应用于person元素。

通过在滑块值发生变化时调用rotatePerson函数，person元素将根据所选Angular 旋转。