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 position 绝对，然后创建实际的 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>