Js 从输入旋转

Question

我想从输入中旋转 div，因此当我将数字更改为 20 时，它会将我的 div 旋转 20 度

.style.transform = “rotate(“n” + “deg” 对我不起作用

function fs(n) {
  n = document.querySelector('input').value;
  document.getElementById('bb').style.transform = "rotate(".push(n)")";
  console.log(n + "deg");
}

<input type='number' placeholder='ttt' oninput='fs()'>
<div class='bb' id='bb'></div>
<button onclick='fs()'>Click</button>

Answer 1

不少问题。

它有助于使 div 位置成为绝对位置，然后创建实际的 css 语句

你想要 rotate(ndeg) 所以你需要正确地创建 ndeg。那是连接 "rotate("+n+"deg)" 或模板文字

`rotate(${n}deg)`

function fs(n) {
  n = document.querySelector('input').value;
  document.getElementById('bb').style.transform = `rotate(${n}deg)`;
}

#bb { position:absolute }

<input type='number' placeholder='Rotation in deg' oninput='fs()'>
<div class='bb' id='bb'>MY DIV</div>

Js 从输入旋转

Js rotate from input

html

javascript

return

input

function